轻量级 mock 外挂通过劫持 window.fetch 实现,无需框架、不侵入业务代码;核心是匹配 url 规则后返回模拟 response,支持通配符/正则、动态数据生成及运行时启停。

直接用 JSON.parse 和 fetch 拦截就能实现轻量级 mock 外挂,不需要框架、不侵入业务代码,核心是劫持全局 fetch 并按规则返回模拟数据。
拦截 fetch 请求并匹配 mock 规则
重写 window.fetch,在发起请求前检查 URL 是否命中预设的 mock 路径。命中后跳过真实网络请求,直接 resolve 模拟响应。
- 用 Map 或对象维护 URL 到 mock 数据(或生成函数)的映射
- 支持通配符匹配(如
/api/user/*)或正则匹配,提升灵活性 - 对 POST/PUT 等带 body 的请求,需调用
request.json()解析原始 body 再参与匹配逻辑
手写 JSON 解析器?没必要,但要安全处理 mock 数据
不用从零实现 JSON 解析器——浏览器原生 JSON.parse 完全够用且安全。重点在于 mock 数据的结构校验与动态生成:
基于三引擎设计,从微信文章、新闻和博客网页提取干净内容,支持标题作者日期元数据,多格式和批量处理。
- mock 数据可为静态对象、返回 Promise 的函数、或含
Math.random()的模板字符串 - 对用户传入的 mock 响应体做
try/catch包裹,避免解析失败导致整个 fetch 崩溃 - 若 mock 返回字符串(如
'{"code":0}'),手动JSON.parse;若已是对象,直接使用
注入 mock 配置与开关控制
提供简易 API 让开发者声明 mock 规则,并支持运行时启停:
- 暴露
mock.on(url, data)或mock.use(rule)注册规则 - 加全局开关(如
window.__MOCK_ENABLED__ = true),便于联调时一键关闭 - 开发环境下自动启用,生产环境忽略所有 mock 逻辑(可通过打包 DefinePlugin 控制)
保持真实响应结构,兼容现有代码
返回的 Response 对象必须符合 Fetch API 规范,否则业务层 res.json() 会报错:
- 用
new Response(body, { status: 200 })构造响应,body 可为字符串或 ReadableStream - 确保
Content-Type: application/jsonheader 被设置(Response 构造时不自动加,需显式传入 init 参数) - 支持 status、headers 等字段透传,例如 mock 错误场景可返回
{ status: 401 }
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










