17370845950

JavaScript mock核心是拦截真实请求而非*对象，分三类：全局重写fetch/XMLHttpRequest（开发调试）、msw基于Service Worker（推荐测试+开发）、axios adapter（仅限axios项目），关键要保持mock与真实接口同步。

JavaScript 模拟网络请求和 mock 数据，核心在于「拦截真实请求」或「替换请求逻辑」，而不是单纯造个假对象。选哪种方法，取决于你处在开发、测试还是联调阶段。

用 fetch 或 XMLHttpRequest 的全局代理拦截（适合开发调试）

在浏览器环境里，最直接的方式是重写 window.fetch 或 window.XMLHttpRequest。这种方式不侵入业务代码，但要注意覆盖所有请求路径，且需手动处理请求匹配与响应构造。

• 必须先保存原始函数，否则后续真实请求会失效：

  const originalFetch = window.fetch;

• 匹配 URL 时建议用 includes 或正则，避免硬编码完整路径：

  if (url.includes('/api/users')) { return Promise.resolve(new Response(JSON.stringify([{id: 1, name: 'mock'}]))); }

• 别忘了处理 POST 请求的 body 解析，否则可能拿不到参数：

  const body = await request.clone().json();

• 拦截后记得调用原始 fetch 处理未匹配的请求，否则第三方 SDK（比如 Sentry、支付宝 JSAPI）可能异常

用 msw（Mock Service Worker）接管请求（推荐用于测试 + 开发）

msw 是目前最接近“真实服务端”的 mock 方案，它基于 Service Worker 拦截请求，支持 REST/GraphQL，且能复用实际 API 类型定义。

• 安装后必须注册 worker：

  npx msw init public/ --save

  ，然后在入口 JS 中调用 worker.start()
• 每个 mock 规则对应一个 rest.get / rest.post，路径支持通配符：

  rest.get('/api/:resource', (req, res, ctx) => { return res(ctx.status(200), ctx.json({ ok: true })); })

• 注意：Service Worker 只在 http://localhost、https 或 file://（部分浏览器）下生效，127.0.0.1 可能不触发
• 若使用 Vite，需配置 server.headers 允许 service-worker.js 被加载，否则控制台报 404

用 axios 的 adapter 或拦截器 mock（适合仅 axios 项目）

如果你项目只用 axios，且不想动全局行为，可以用 adapter 完全接管请求发送逻辑，比拦截器更底层、更可靠。

• 拦截器只能修改 config 或 response，无法跳过真实网络调用；adapter 才能彻底阻止发包：

  axios.create({ adapter: (config) => { if (config.url.includes('/mock')) { return Promise.resolve({ data: { id: 99 }, status: 200 }); } return defaultAdapter(config); } });

• 务必保留 fallback 到默认 adapter，否则非 mock 请求会失败
• 注意 adapter 返回值格式必须严格符合 axios 内部约定：{ data, status, statusText, headers, config }
• 该方式对 fetch、XMLHttpRequest 或其他库完全无效，纯 axios 局部方案

真正难的不是 mock 出数据，而是让 mock 行为与真实接口保持同步——比如状态码、字段结构、分页逻辑、错误响应格式。一旦 mock 和后端约定脱节，前端就容易写出“本地跑得通、联调全崩”的代码。所以 mock 文件最好和 OpenAPI/Swagger 文档联动，或者由后端统一导出 mock 规则。