背景
不知何种原因,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
格式数据,暂不支持一些高级用法,未来会继续完善。