背景

不知何种原因，mock.js只支持拦截XMLHttpRequest，不支持fetch，其实要支持也非常简单。npm上也有几个老外写的有关mock-fetch的仓库，但是鉴于自己已经习惯了mock.js的语法，所以还是决定写一个非常轻量的辅助包来让mock.js支持fetch。

介绍

安装

npm i mockjs-fetch --save

使用

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

import Mock from 'mockjs';
import mockFetch from 'mockjs-fetch';
mockFetch(Mock);

兼容Mock.js以下语法：

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

完整示例：

import Mock from 'mockjs';
import mockFetch from 'mockjs-fetch';
mockFetch(Mock);

Mock.setup({
	timeout: '200-400', // mockFetch支持 mockjs 已有的 timeout 设置项
	debug: true, // mockFetch新增的设置项，如果开启，请求时会打印一些日志
});

Mock.mock(/testMockFetch\.json/, {
	code: 0,
	data: {
		total: 47,
		'data|10': [
			{
				name: '小茗同学',
				age: 18,
				address: '中国北京朝阳区'
			},
		],
	},
});

测试

fetch('/aaa/testMockFetch.json').then(resp => resp.json()).then(resp => {
	console.log('输出结果：', resp);
});

其它说明

暂时只是很简单的支持返回json格式数据，暂不支持一些高级用法，未来会继续完善。