推荐用 async/await + promise.resolve() 模拟成功响应，返回 new response(json.stringify(data), { headers: { 'content-type': 'application/json' } }) 确保兼容 fetch api；mock 数据应从 swagger 导出或基于示例 json 维护，配合 jsdoc 类型注解保障与 ts 接口一致。
怎么用HTML+JS快速模拟API响应结构
直接在前端页面里模拟接口返回数据，不是为了替代后端，而是让UI开发不卡在联调上。核心思路是：用 fetch 拦截或绕过真实请求，改用本地JS对象或JSON字符串当响应体。
常见错误是硬编码整个响应体到HTML里，结果一改字段就要翻DOM；或者用 XMLHttpRequest 手写太多状态判断，反而比真接口还难调试。
- 推荐用
async/await+Promise.resolve()模拟成功响应，结构清晰、可 await、能 throw 错误 - 把模拟数据抽成独立变量（如
mockUserData），和渲染逻辑分离，改字段只动一处 - 避免在HTML中内联大量JSON字符串——易出语法错误，且编辑器无高亮/校验
- 如果需要多状态（loading/error/success），用一个
status字段控制，别靠DOM类名切换逻辑
fetch 被拦截但没报错？检查是否漏了 return 或 catch
很多人写了个 mock 版本的 fetch，但页面还是发了真实请求——根本原因是没真正“替换”全局 fetch，或者替换了却没 return 响应 Promise。
典型陷阱：在 mock 函数里写了 console.log 和 return { json: () => data }，但忘了这个对象不是 Response 实例，await res.json() 会报 TypeError: res.json is not a function。
- 必须 return 一个真正的
Response对象，可用new Response(JSON.stringify(data), { headers: { 'Content-Type': 'application/json' } }) - 如果只是临时测试，更简单的是直接覆盖
window.fetch = () => Promise.resolve(...)，但记得在真实环境里删掉或加开关 - 注意
fetch的默认 method 是GET，mock 时若没判断options.method，POST 请求也会走 GET 分支
JSON结构嵌套深、字段多，怎么避免 mock 数据和TS接口不一致
mock 数据字段少一个下划线、类型错一个 string/number，后续TS编译不报错，但运行时 data.user.profile?.avatarUrl 就是 undefined，排查半天才发现是 mock 写错了。
这不是代码问题，是协作断点：前端自己 mock，又没和后端定义对齐，等于凭空造了个协议。
- 优先从后端Swagger/OpenAPI文档导出 JSON Schema，再用工具（如
json-schema-faker）生成 mock 数据，保证字段名、嵌套层级、必选可选都一致 - 如果没文档，至少把后端给的示例响应存为
mock.example.json，再基于它改，别手敲 - 在 mock 变量上加 JSDoc 注释，比如
/** @type {import('./api-types').UserResponse} */，VS Code 能实时提示字段缺失
要不要用 service worker 拦截所有 fetch？大多数情况没必要
Service Worker 确实能全局劫持网络请求，但它的生命周期、缓存策略、HTTPS 限制、调试难度，远超一个简单 mock 需求所需。
你只是想让「用户列表页」显示几条假数据，结果搭了个 SW，发现 localhost 不生效、Chrome DevTools 的 Network 面板看不到 mock 请求、更新 JS 后 SW 还在跑旧逻辑……得不偿失。
- 纯静态 HTML + JS 场景，直接重写
window.fetch最轻量，刷新即生效，无持久化副作用 - 如果项目已用 Vite/Webpack，优先用代理（
vite.config.ts中的server.proxy）把/api/users指向本地 JSON 文件，比 JS 拦截更贴近真实网络行为 - 只有需要模拟离线、延迟、503 错误等复杂网络条件时，才值得引入 SW，否则就是杀鸡用牛刀
mock 的本质是“骗过自己”，不是建个迷你后端。越靠近你当前调试路径的方式，就越容易控制、越不容易漏掉边界情况。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
