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 完全接管请求发送逻辑,比拦截器更底层、更可靠。
动态WEB网站中的PHP和MySQL详细反映实际程序的需求,仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法,让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能,对常用的、强大的包
立即学习“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 规则。










