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 完全接管请求发送逻辑，比拦截器更底层、更可靠。
立即学习“Java免费学习笔记（深入）”；
- 拦截器只能修改 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 规则。
