JS项目Mock核心是模拟真实接口行为而非仅造数据，需覆盖嵌套结构、条件分支、分页、错误状态及动态字段；推荐Mock.js（轻量快速）或msw（现代无侵入），结合实体建模、函数逻辑与分层构造提升真实性。
在 JS 项目中使用 Mock 模拟复杂业务返回数据，核心是让接口响应贴近真实场景：包含嵌套结构、条件分支、分页逻辑、错误状态、动态字段等。关键不在于“造数据”，而在于“模拟行为”。
用 Mock 工具接管请求入口
推荐使用 Mock.js（轻量、支持正则匹配和函数生成）或 msw（Mock Service Worker）（现代、与真实请求无侵入、支持浏览器和 Node 环境）。 若项目已用 axios，也可搭配 axios-mock-adapter 快速拦截。
- Mock.js 适合开发阶段快速写规则，比如：
Mock.mock('/api/order/list', 'get', { "list|10": [{ "id|+1": 1, "status|1": ["paid", "shipped", "cancelled"], "items|2-5": [{ "name": "@cname", "price|10-100.2": 1 }] }] }) - msw 需定义 handler，更适合模拟条件逻辑，例如根据 query 参数返回不同分页数据，或延迟 800ms 模拟慢接口
分层构造真实感强的响应结构
复杂业务数据往往有层级关系（如订单→商品→规格→物流），不能只靠随机生成。建议按“实体建模”方式组织：
- 先定义基础 Schema：用户、订单、SKU、地址等各自独立的 mock 数据模板
- 再通过引用组合：订单中
"user": @user，商品列表中每个 item 的"spec": @spec - 对动态字段加函数逻辑：比如
"totalPrice": function() { return this.items.reduce((s, i) => s + i.price * i.qty, 0) }
模拟业务逻辑分支和异常流
真实接口不是总成功。Mock 要覆盖：空数据、分页末页、权限拒绝、参数校验失败、服务降级返回缓存等。
- 用 URL 参数或请求头控制行为：比如加
?mock=empty返回空数组，?mock=error=403触发权限错误 - 在 msw 中可基于 req.url.searchParams 判断，返回对应 status 和 body；Mock.js 可用函数判断
if (/error=/.test(window.location.search)) { throw new Error(...) } - 对耗时操作（如提交订单），返回 success 后再延时触发 “通知轮询接口” 返回支付结果，模拟真实链路
与前端代码解耦，便于后期替换
避免在组件里写 if (process.env.NODE_ENV === 'mock') {...}。统一在请求层拦截：
- 封装 request 函数，开发环境自动走 mock 适配器，生产走真实 axios/fetch
- mock 规则单独维护在
/mock/目录下，按模块拆分（user.mock.js、order.mock.js），启动时批量注册 - 上线前删掉 mock 依赖或关闭开关，不改业务代码
不复杂但容易忽略：Mock 的价值不在“看起来像”，而在“跑得通业务逻辑”。只要覆盖好数据结构、状态流转和边界 case，联调效率能明显提升。
