HTML怎么做请求Mock_html Mock模拟请求数据方法【总结】-html教程-PHP中文网

Mock.mock() 通过劫持 XMLHttpRequest 拦截 XHR/jQuery 请求并响应 GET，不支持 fetch；需确保请求方式匹配，路径精确或正则，响应结构与后端一致，错误需用函数抛出，fetch 需手动覆盖并返回 Response 实例。

html怎么做请求mock_html mock模拟请求数据方法【总结】

直接在 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。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

最简补救：手动覆盖 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 方法区分、响应头设置、错误分支覆盖。这些地方松一扣，联调时就会多花三倍时间对齐。