前端接口联调时 JS 怎么用 Mock 模拟分页返回数据-js教程-PHP中文网

前端联调时用JS Mock实现分页数据模拟，核心是拦截请求并根据page、pageSize、keyword等参数动态生成含list、total、page、pageSize的响应结构，支持Mock.js或原生fetch拦截，需确保参数名与后端一致且total为过滤后总数。

前端接口联调时 js 怎么用 mock 模拟分页返回数据

前端联调时用 JS Mock 分页数据，核心是让接口返回符合分页结构的假数据（比如 { list: [...], total: 100, page: 1, pageSize: 10 }），同时能根据请求参数（如 page、pageSize、keyword）动态生成对应页的数据。不需要后端，本地就能模拟真实分页行为。

用 Mock.js 拦截请求并动态生成分页响应

Mock.js 是最常用方案，支持正则匹配 URL 和函数式响应。先安装：

然后在入口文件（如 main.js 或单独的 mock/index.js）中写：

import Mock from 'mockjs';
<p>// 模拟一个用户列表（100 条基础数据）
const userList = Mock.mock({
'list|100': [{
'id|+1': 1,
'name': '@cname',
'email': '@email',
'age|18-65': 1,
'status|1': ['active', 'inactive', 'pending']
}]
}).list;</p><p>// 拦截 GET /api/users?page=2&pageSize=10
Mock.mock(/\/api\/users/, 'get', (options) => {
const url = new URL('<a href="https://www.php.cn/link/13aa1df0f906a7db328f56a81aed2417">https://www.php.cn/link/13aa1df0f906a7db328f56a81aed2417</a>' + options.url);
const page = parseInt(url.searchParams.get('page')) || 1;
const pageSize = parseInt(url.searchParams.get('pageSize')) || 10;
const keyword = url.searchParams.get('keyword') || '';</p><p>// 过滤（简单字符串包含匹配）
let filtered = userList;
if (keyword) {
filtered = userList.filter(u =>
u.name.includes(keyword) || u.email.includes(keyword)
);
}</p><p>const total = filtered.length;
const start = (page - 1) * pageSize;
const end = start + pageSize;
const list = filtered.slice(start, end);</p><p>return {
code: 200,
message: 'success',
data: {
list,
total,
page,
pageSize
}
};
});</p>

用原生 fetch 拦截（现代替代 Mock.js）

如果项目不用 Mock.js，或想更轻量，可用 window.fetch 重写拦截（仅开发环境）：

Wjs Uploading Video

将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

下载

if (process.env.NODE_ENV === 'development') {
  const originalFetch = window.fetch;
  window.fetch = async (url, config) => {
    if (url.includes('/api/users') && config?.method === 'GET') {
      const urlObj = new URL(url);
      const page = Number(urlObj.searchParams.get('page')) || 1;
      const pageSize = Number(urlObj.searchParams.get('pageSize')) || 10;
      const keyword = urlObj.searchParams.get('keyword') || '';
<pre class="brush:php;toolbar:false;">  // 复用上面生成的 userList 数据
  let filtered = userList;
  if (keyword) {
    filtered = userList.filter(u =>
      u.name.toLowerCase().includes(keyword.toLowerCase())
    );
  }

  const total = filtered.length;
  const list = filtered.slice((page - 1) * pageSize, page * pageSize);

  return Promise.resolve({
    json: () => Promise.resolve({
      code: 200,
      data: { list, total, page, pageSize }
    })
  });
}
return originalFetch(url, config);

}; }

配合 axios 封装分页请求（确保前端逻辑一致）

Mock 只是造数据，前端调用方式要和真实接口对齐。例如封装一个标准分页请求函数：

// api/user.js
export function fetchUserList(params) {
  return axios.get('/api/users', { params });
}
<p>// 组件中使用（Vue/React 都适用）
const [list, setList] = useState([]);
const [pagination, setPagination] = useState({ page: 1, pageSize: 10, total: 0 });</p><p>useEffect(() => {
fetchUserList({ page: pagination.page, pageSize: pagination.pageSize, keyword })
.then(res => {
if (res.data.code === 200) {
setList(res.data.data.list);
setPagination(prev => ({
...prev,
total: res.data.data.total
}));
}
});
}, [pagination.page, pagination.pageSize, keyword]);</p>