Mock 數(shù)據(jù)寫法
我們使用Mock.js生成隨機(jī)數(shù)據(jù)望众，所以mock數(shù)據(jù)前先到其官網(wǎng)了解一下摔癣。
如何注冊模擬接口
- 在
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函數(shù)，可生成隨機(jī)數(shù)據(jù)
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 的隨機(jī)數(shù)
{ 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
為了讓模擬接口更直實(shí)熊楼，可以增加一個延時霹娄，單位ms，例如：
// 隨機(jī)延時
delay({ no: 123 }) // { no: 123 }
// 200毫秒延時
delay({ no: 123 }, 200) // { no: 123 }
mock
如果需要生成隨機(jī)數(shù)鲫骗，需要使用用mock函數(shù)犬耻，mock函數(shù)寫法參考 http://mockjs.com/examples.html
mock({ "string|1-10": "★" }) // { "string": "★★★★★★★" }
toSuccess | toError
這個即為全局配置文件src/config.js中的mock下的toSuccess,toError，可以讓我們模擬接口時少寫幾行代碼执泰。
// 隨機(jī)延時
toSuccess(mock({
"string|1-10": "★"
}))
// { status: true, data: { string: "★★" } }
// 增加400ms延時
toSuccess(mock({
"string|1-10": "★"
}), 400)
// { status: true, data: { string: "★★★★" } }
fetchMock
fetchMock可以攔截請求枕磁，使用模擬數(shù)據(jù)代替真實(shí)接口數(shù)據(jù)，框架本身已裝包裝好了fetchMock的實(shí)現(xiàn)术吝，如果現(xiàn)有封裝不滿足计济，可以自行擴(kuò)展，FetchMock官網(wǎng)排苍，一般不需要擴(kuò)展沦寂。
對接直實(shí)接口
當(dāng)后端提供給我們真實(shí)接口的時候，我們需要替換我們的模擬接口淘衙，這里我只是簡單的把模擬接口進(jìn)行注釋掉传藏，或在__mocks__/index.js中注釋掉這個文件，希望大家提供一個更好的方式彤守。
