Mock.mock() 通过劫持 XMLHttpRequest 拦截 XHR/jQuery 请求并响应 GET，不支持 fetch；需确保请求方式匹配，路径精确或正则，响应结构与后端一致，错误需用函数抛出，fetch 需手动覆盖并返回 Response 实例。
直接在 HTML 页面里做请求 Mock，不是为了替代后端，而是让 UI 开发不卡在联调上；核心是「拦截或绕过真实 fetch / XHR，返回可控的 Response 对象」——硬编码 JSON 字符串进 DOM、或只 mock 数据不 mock 响应结构，这两类做法基本都会在后续调试中翻车。
怎么用 Mock.mock() 拦截并响应 GET 请求
Mock.mock() 本质是劫持全局 XMLHttpRequest，它不处理 fetch，所以必须确保你用的是 jQuery.ajax 或原生 XHR 发起请求。常见错误是写了 Mock.mock('/api/user', { id: 1, name: '张三' })，但页面实际走的是 fetch('/api/user')，结果请求照发、Mock 完全没生效。
- 路径匹配支持字符串精确匹配（
'/api/user'）或正则（/^\/api\/.*/），注意斜杠方向和开头是否带/ - 第二个参数若为对象，Mock 默认只响应
GET；如需支持POST，必须显式写成Mock.mock('/api/login', 'post', { ... }) - 返回数据会自动序列化，但字段名必须和后端约定一致；比如后端返回
{ data: { user: { id: 1 } } }，你就不能只 mock{ id: 1 }，否则 JS 解构时res.data.user会报错 - 别在
mock()里 throw 错误模拟失败——它不触发error回调，只会静默失败；要用函数形式：Mock.mock('/api/user', () => { throw new Error('network error') })
为什么 fetch 被 Mock 后仍发真实请求
因为 Mock.js 不拦截 fetch，它是基于 XMLHttpRequest 的历史方案。如果你项目已全面迁移到 fetch，强行套用 Mock.mock() 就等于没 mock。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 最简补救：手动覆盖
window.fetch，但必须返回真正的Response实例，例如：window.fetch = (url) => { if (url === '/api/profile') { return Promise.resolve(new Response(JSON.stringify({ code: 0, data: { name: '@cname' } }), { headers: { 'Content-Type': 'application/json' } })) } return window.__original_fetch?.(url) } - 漏掉
return是高频错误：写了逻辑但没 return Promise，fetch 就会 fallback 到原生行为 - 没处理
options.method会导致所有请求都走 GET 分支，POST 数据体（options.body）直接丢失 - 如果用了 TypeScript，记得给 mock 响应加类型断言，避免
data?.user?.id运行时为undefined却编译通过
如何让 Mock 数据和 TS 接口保持同步
字段少一个下划线、类型错一个 string/number，TS 编译不报错，但运行时 data.user.profile?.avatarUrl 就是 undefined——这种问题往往要查半小时才意识到是 Mock 写错了。
立即学习“前端免费学习笔记（深入）”；
- 把 mock 数据变量单独抽到
mock-data.ts，和接口定义放一起，用 JSDoc 注解标注字段来源：/** @see IUserProfile */ const mockUserProfile = Mock.mock({ 'code|1': 0, 'data|1': { 'id|+1': 1, 'name': '@cname', 'avatar_url': '@image("40x40")' // 注意这里是下划线，不是驼峰 } }) - 避免用
@image等随机生成器直接塞进字段值；先定义常量：const AVATAR_URL = 'https://example.com/avatar.jpg'，再在 mock 中引用 - Swagger 导出的示例 JSON 是最可靠的 mock 源头，比手写规则更贴近真实响应结构
- 不要在 HTML 的
<script></script>标签里写大段 mock 配置——编辑器无语法校验，JSON 多个逗号就整个失效
真正难的不是生成假数据，而是让 mock 行为和真实请求在边界上严丝合缝：路径匹配规则、HTTP 方法区分、响应头设置、错误分支覆盖。这些地方松一扣，联调时就会多花三倍时间对齐。
