JS Mock核心是构建“请求可拦截、数据可契约、逻辑可复现”的前端闭环，需通过Mock.js规则生成动态真实数据、精准URL/方法拦截、环境隔离与模块化组织来落地。
JS 中 Mock 模拟不是配个假 JSON 就完事，核心是建立“请求可拦截、数据可契约、逻辑可复现”的前端自主开发闭环。真正落地时，要同时处理三件事：怎么生成像真的一样的数据、怎么让请求自动走 mock、怎么让整套机制不拖慢协作节奏。
用规则驱动代替硬编码数据
别写list: [{ id: 1, name: '张三' }, { id: 2, name: '李四' }]这种静态快照。Mock.js 的力量在模板规则：
-
数量可控：
'list|5-15': [ { id: '@id', name: '@cname', createdAt: '@date("YYYY-MM-DD")' } ]——每次返回 5 到 15 条，字段内容全随机但结构稳定 -
字段带语义：
email: '@email'生成真实格式邮箱，avatar: '@image("40x40", "@color", "头像")'直接返回可用图片 URL -
状态有概率：
'status|3-1': ['active', 'inactive', 'pending']表示 active 占 3/4，适合模拟真实业务分布 -
ID 自增不重复：
id|+1: 1000从 1000 开始递增，列表翻页、新增条目都保持连续性
精准拦截，只在该生效的地方起作用
Mock.mock() 不是全局魔法，它只对原生 XMLHttpRequest 生效，且匹配逻辑必须明确：
jm-jsjkxyjs02-zlm-405
下载
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
-
URL 匹配要具体：用正则
/^\/api\/user\/\d+$/拦截详情页，用通配符/api/order/*覆盖所有订单子路径 -
方法区分不能省：GET 和 POST 必须分开写，
Mock.mock('/api/login', 'post', { code: 200, token: '@guid' }) -
函数式响应更灵活：第三个参数传函数，可读取
options.body解析提交内容，或根据options.url中的 query 参数返回不同数据 -
务必环境隔离：入口文件中加判断
if (process.env.NODE_ENV === 'development') { require('@/mock') }，上线自动失效
按业务组织，而不是按技术堆文件
mock 目录不是垃圾桶，而是前端的数据契约中心：
-
模块化拆分：建
mock/user.js（登录、列表、详情、权限）、mock/order.js（创建、查询、取消、分页）、mock/exception.js（专管 401/404/500 模拟） -
统一入口控制：在
mock/index.js中导入各模块，并调用Mock.setup({ timeout: '300-800' })加入网络延迟，更贴近真实体验 - 与文档对齐：接口字段变更时，优先改 YAPI/Swagger 导出的 JSON Schema，再用工具转成 Mock 模板，避免人工维护脱节
-
类型不丢：配合 TypeScript，在
types/api.ts中定义响应接口，Mock 数据生成时用 IDE 提示校验字段是否一致
避开高频踩坑点
很多团队 mock 用着用着就废了，往往卡在这几个细节：
- axios/fetch 不拦截？ 因为它们底层不是 XHR——要么封装一层适配，要么换 MSW 这类现代方案；Mock.js 本身不负责包装请求库
-
时间字段永远不变？ 写
updatedAt: '@datetime("yyyy-MM-dd HH:mm")'，别用new Date().toISOString()这种静态值 -
分页失效？ 别只 mock 返回数组，要解析 URL 中的
page和pageSize参数，动态切片返回 - 同事不会用？ 在项目 README 中写清三行启动说明：“装依赖 → 确保入口已引入 → 刷新页面”，并附上 curl 测试命令
