1. Mock 数据写在代码里或本地JSON文件

缺点：

  • Mock效果不好
  • 与真实Server环境的切换非常麻烦，一切需要侵入代码切换环境的行为都是不好的

2. 请求拦截

代表：Mock.js
示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Mock.mock({
  "array|1-10": [
    {
      "name|+1": [
        "Hello",
        "Mock.js",
        "!"
      ]
    }
  ]
})

=>

{
  "array": [
    {
      "name": "Hello"
    },
    {
      "name": "Mock.js"
    },
    {
      "name": "!"
    },
    {
      "name": "Hello"
    }
  ]
}

原理：
重写XHR

优点：

  • 与前端代码分离
  • 可生成随机数据

缺点：

  • 数据都是动态生成的假数据，无法模拟增删改查的情况
  • 只支持ajax，不支持fetch

3. 接口管理工具

代表：RAP2、Swagger、moco、…

优点：

  • 配置功能强大、可靠

缺点

  • 配置复杂、依赖后端

4. 本地 node 服务

代表：json-server
优点：

  • 配置简单，快速启一个RESTful API服务
  • 自定义程度高
  • 增删改查真实模拟

缺点：

  • 无法和后端保持同步

5. 基于 Service Worker 的 MSW

优点：

  • 基于 Service Worker 实现请求拦截，行为和真实请求非常一致，想法很特别
  • 不需要切换环境，不用依赖后端
  • 配置容易，搭建起来十分方便

缺点：

  • 无法和后端同步更新