React 中优雅地使用fetch+Mockjs

在写代码的过程中，难免会遇到需要模拟数据的时候，当然mockjs是我们的选择之一，通常的使用方法如下：

// 配置模拟数据：
Mock.mock('http://g.cn', {
    'name'     : '@name',
    'age|1-100': 100,
    'color'    : '@color'
});

// 发送Ajax请求：
$.ajax({
    url: 'http://g.cn',
    dataType:'json'
    }).done(function(data, status, xhr){
    console.log(
    JSON.stringify(data, null, 4)
    )    
})；

但是这种使用如果对于需要模拟很多个接口不是那么好，尤其在工程化的项目中，在利用create-react-app构建react项目中，笔者是这样融入mockjs（需要安装fetch-mock包--yarn add fetch-mock，这个包主要用来包装fetch）的。

工程目录.png

1.主要增加了mock文件夹，api文件夹，其中agentList.js是模拟数据

agentList.js.png

2.mock.js和index.js文件分别是这样

mock.jspng

index.js.png

3.最后需要调用api

api.js.png

4.在组件中调用即可

image.png