mock.js核心是拦截请求并生成假数据，适用于前端独立开发等场景；三步即可上手：安装、写规则、入口引入；支持随机数据、数量控制、异常模拟及函数式响应；建议对接接口文档、环境区分、逻辑解耦与ts类型校验。
Mock.js 学起来不难，关键在理解“拦截 + 生成”两个核心动作，再配合项目结构落地。不用从零造轮子，按业务节奏分步上手就行。
先搞懂它能干什么
Mock.js 不是后端，也不改真实接口，它只做两件事：
- 监听你发出去的 Ajax 请求（比如 axios.get('/api/user')）
- 在请求真正到达服务器前，用预设规则返回假数据，格式、字段、状态码都可控制
适合场景：前端独立开发、联调前自测、UI 走查、自动化测试准备数据。
三步快速跑通一个接口
以 Vue 或 React 项目为例（无需后端）：
-
装包：
npm install mockjs --save-dev -
建文件：在
src/mock/index.js中写规则，例如：Mock.mock('/api/users', 'get', { list: [{ id: 1, name: '@cname', age: '@integer(18,60)' }] }) -
启用它：在入口文件（如
main.js）顶部加一行import '@/mock/index'，确保加载时机早于任何请求发起
让数据更贴近真实业务
别只写静态对象，用 Mock.js 的语法让数据活起来：
-
随机文本：
'@cname'（中文姓名）、'@csentence(5,15)'（5–15字句子） -
可控数量：
'list|5-10': [ {...} ]（每次返回 5 到 10 条） -
模拟异常：
Mock.mock('/api/order', 'post', { 'code|1': [200, 401, 500], 'msg': '@pick(["成功","未登录","服务器错误"])' }) - 函数式响应：第三个参数可传函数，支持读取 URL 参数、判断 method，实现条件返回
进阶建议：避免后期踩坑
团队协作或长期维护时注意：
- Mock 规则和真实接口文档对齐，推荐用 Swagger/YAPI 导出 JSON 后转成 Mock 模板
- 开发环境开启 Mock，测试/生产环境自动禁用（通过
process.env.NODE_ENV控制） - 复杂逻辑别全塞进 Mock，可封装成工具函数，再在模板里调用，保持可读性
- 配合 TypeScript，用接口类型定义响应结构，Mock 数据生成时做类型提示校验
