React18入门（第六篇）——使用mock.js模拟ajax请求

---

一、mock 服务的在工作中的重要性

• 工作中，前后端通常并行开发，而非串行的，不能等后端开发好，再进行前端开发
• 前后端商议好 API 格式，双方各自开发。前端使用 mock 服务
• 待前后端都开发完成，在对接联调功能

二、mock.js 简介

• 前端代码（React 组件中）引入 mock.js
• 定义要模拟的路由、返回结果
• mock.js 劫持 ajax 请求，得到模拟的结果

三、安装及使用

3.1 安装 mock.js

npm i mockjs --save-dev

3.2 安装 types 包（ts项目需要）

npm i --save-dev @types/mockjs

3.3 创建文件夹

import Mock from 'mockjs'

Mock.mock('/api/test', 'get', () => {
  return {
    error: 0,
    data: {
      name: '张三丰',
      gender: 1,
      age: 24,
    },
  }
})

3.4 在页面中使用

四、mock.js 使用总结

• mock.js 只能劫持 XMLRequest ，不能劫持 fetch，有局限性
• 要在生产环境（上显示）注释掉，否则线上请求也会被劫持
• 结论：不建议在项目中直接使用 mock.js

五、解决方案：nodejs 服务 + mock.js

1. mock.js 两大功能：劫持 Ajax + 全面的 Random 能力，可以快速生成模拟数据
2. 把 mock.js 用于 nodejs 服务端，使用 Random 能力

自己使用 node.js + koa + mock.js , 搭建一个建议的后端服务，进行 mock