mockjs-fetch:加2行代码让你的mock.js支持fetch
本文由 小茗同学 发表于 2024-05-15 浏览(152)
最后修改 2024-05-15 标签:

背景

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