mockjs-fetch

鉴于Mock.js不支持拦截fetch发起的ajax，本模块即为Mock.js的补充。安装：

1npm i mockjs-fetch --save

有2种使用方式，可以搭配mock.js一起使用，也可以独立使用，两种方式各有区别：

• 搭配mock.js使用时完整继承mock.js的各种语法，功能更强大，但是鉴于mock.js在upload场景有一些至今未解决的bug，使用时有一些不太方便；
• 独立使用，只拦截fetch、不对XMLHttpRequest做拦截，不支持'id|+1'等mockjs专属语法，适合只需要对fetch做一些简单mock的场景；

!!!请注意，线上环境务必注释mock相关代码的引入，避免对线上产生一些不必要的兼容性问题!!!

搭配mock.js一起使用

只需加2行代码就可以让你的mock.js支持fetch：

1import Mock from 'mockjs';
2// 1.x 导入方式
3// import mockFetch from 'mockjs-fetch';
4// 2.x 导入方式
5import { mockFetch } from 'mockjs-fetch';
6mockFetch(Mock);

兼容Mock.js以下语法：

1Mock.setup({timeout: 400});
2Mock.setup({timeout: '200-400'});

完整示例：

1import Mock from 'mockjs';
2// 1.x 导入方式
3// import mockFetch from 'mockjs-fetch';
4// 2.x 导入方式
5import { mockFetch } from 'mockjs-fetch';
6mockFetch(Mock);
7
8Mock.setup({
9    timeout: '200-400', // mockFetch支持 mockjs 已有的 timeout 设置项
10    debug: true, // mockFetch新增的设置项，如果开启，请求时会打印一些日志
11});
12
13Mock.mock(/testMockFetch\.json/, {
14    code: 0,
15    data: {
16        total: 47,
17        'data|10': [
18            {
19                name: '小茗同学',
20                age: 18,
21                address: '中国北京朝阳区'
22            },
23        ],
24    },
25});
26
27const resp = await fetch('/aaa/testMockFetch.json').then(resp => resp.json());
28console.log('输出结果：', resp);

独立使用

只对fetch进行拦截：

1import { Mock } from 'mockjs-fetch';
2
3Mock.setup({
4    timeout: '200-400',
5    debug: true, // 如果开启，请求时会打印一些日志
6});
7
8// 直接原样输出（注意不支持 'id|+1' 等特殊语法）
9Mock.mock(/testMockFetch\.json/, {
10    code: 0,
11    data: {
12        total: 47,
13        dataList: [
14            {
15                name: '小茗同学',
16                age: 18,
17                address: '中国北京朝阳区'
18            },
19        ],
20    },
21});
22
23// 第二个参数支持写function，根据入参返回不同的结果，params会自动根据GET或POST取合适的值
24Mock.mock(/testMockFetch2\.json/, ({url, params }) => {
25    if (parasm.a === 1) {
26        return {code: 500};
27    }
28    return {code: 0};
29});
30
31const resp = await fetch('/aaa/testMockFetch.json').then(resp => resp.json());
32console.log('输出结果：', resp);
33const resp2 = await fetch('/aaa/testMockFetch2.json').then(resp => resp.json());
34console.log('输出结果：', resp2);