Mock 数据写法
我们使用Mock.js生成随机数据，所以mock数据前先到其官网了解一下。
如何注册模拟接口
- 在
src/__mocks__下新建一个文件，例如demo.js。 - 在
src/index.js中注册新建的demo.js。
import packMock from '@/utils/packMock';
import demo from './demo';
packMock(
demo,
);
- 在demo.js中模拟需要的接口。
使用方式
直接暴露简单对象
demo.js
export default {
// Get方式 后跟接口地址
'GET /api/getUserInfo': {
name: '小雨',
sex: '男',
age: 18,
},
// 可以不指定请求方式
'/api/getUserInfo1': ['one', 'two', 'three'],
}
使用API函数，可生成随机数据
demo.js
export default ({ fetchMock, delay, mock, toSuccess, toError }) => {
return {
'/api/charts/bar1': options => {
return toSuccess(
mock([
{ year: '1951 年', "sales|1-100": 100 }, // 1-100 的随机数
{ year: '1952 年', "sales|1-100": 100 },
{ year: '1956 年', "sales|1-100": 100 },
{ year: '1957 年', "sales|1-100": 100 },
{ year: '1958 年', "sales|1-100": 100 },
]),
400
);
},
};
};
API
delay
为了让模拟接口更直实，可以增加一个延时，单位ms，例如：
// 随机延时
delay({ no: 123 }) // { no: 123 }
// 200毫秒延时
delay({ no: 123 }, 200) // { no: 123 }
mock
如果需要生成随机数，需要使用用mock函数，mock函数写法参考 http://mockjs.com/examples.html
mock({ "string|1-10": "★" }) // { "string": "★★★★★★★" }
toSuccess | toError
这个即为全局配置文件src/config.js中的mock下的toSuccess,toError，可以让我们模拟接口时少写几行代码。
// 随机延时
toSuccess(mock({
"string|1-10": "★"
}))
// { status: true, data: { string: "★★" } }
// 增加400ms延时
toSuccess(mock({
"string|1-10": "★"
}), 400)
// { status: true, data: { string: "★★★★" } }
fetchMock
fetchMock可以拦截请求，使用模拟数据代替真实接口数据，框架本身已装包装好了fetchMock的实现，如果现有封装不满足，可以自行扩展，FetchMock官网，一般不需要扩展。
对接直实接口
当后端提供给我们真实接口的时候，我们需要替换我们的模拟接口，这里我只是简单的把模拟接口进行注释掉，或在__mocks__/index.js中注释掉这个文件，希望大家提供一个更好的方式。
