前言：
作為一名前端開發程序猿，每天都被產品經理催著開發，項目一啟動，產品就過來了。噓寒問暖：大胸弟，你啥時開始做啊？一般我們都會直接告訴TA，你先找接口解決數據問題。
而我們也會經常遇見“巧婦難為無米之炊”的難題，難道我們離開后端數據就不能生存啦？最近忙于某個項目，也遇到了這事，那我是怎么去解決的叻？容我娓娓道來。
所謂天才第一步，XXX啥褲。開個玩笑，我們肯定是需要先搞清楚我們想干啥。只有明確了目標，才能減少走彎路。 需求：
- 模擬發送請求
- 模擬數據回傳
- 本地開發實現
這三步中，模擬發送請求，這個目標對于我們前端來說，它并不重要，后端是比較看重你給什么參數，我好還你啥數據。
所以我們前端要做好模擬數據回傳，這樣才能更好的跟后端去約定字段，數據結構相關的。有了數據，我們才能更好的去實現功能開發。
目標分析
模擬數據回傳，標準的接口組成，由兩部分組成：
- 數據結果
- 請求狀態
說到這里，我就忍不住的打開了瀏覽器調試模式。我正大光明的瞄了眼知乎的請求，比如這個接口：
https://www.zhihu.com/api/v4/creator/apply
那我們到底本地怎么模擬數據了？
解決問題
到了最后一步，咱們猿類最關心的問題，你說你洋洋灑灑說了一大堆廢話，你倒是上代碼啊！（我等著ctrl+c, ctrl+v 訥。我不創造代碼，我只是代碼的搬運工。）
廢話就不扯那個淡，首先最直接方法，固定寫好。
const result = {creator_status: 1entrance_msg: ""level: 1notification: {apply_pass: 0}status: 2
}有人說，這個我也會，我還會給他加個 setTimeout 函數，更加像：
setTimeout(() => {this.setState({...result,})
}, 2000)嘿，突然發現自己是個天才，簡直跟接口回調一毛一樣。
喂，醒醒....咋能不能有點追求。
哦，是不是嫌數據少了，我再復制幾次。
low， 咱能不能對自己要求高一點。
我們應該讓數據更加可變，并且還可以模擬異步調用。所以，我們來改造一下。
首先用 js 實現一個概率函數，對，就是那個隨機抽獎函數。網上隨手找了一個：
random = (targetArr, probArr) => {let sum = 0,factor = 0,random = Math.random();for (let i in probArr) {sum += probArr[i];}random *= sum;for (let i in probArr) {factor += probArr[i];if (random <= factor) {return targetArr[i];}}return null;}這個簡單，不就是把這個隨機函數加到數據上去就好啦。
low, 咱能不能再高級點，好歹也是前端高級猿類。
我們可以這樣：(還可以刺激地加點錯誤數據，吃不吃雞，意不意外，驚不驚喜。翻譯翻譯，啥叫驚喜，來，咱看一看。)
getResult = () => {return {creator_status: this.random([1, 2, 3, 4], [0.2, 0.2, 0.1, 0.5]),entrance_msg: this.random(['', void 0, '恭喜你中獎啦！', 'null'], [0.4, 0.1, 0.3, 0.2]),level: this.random([1,2], [0.5, 0.5]),notification: this.random([{apply_pass: this.random([0, 1], [0.2, 0.8])}, {}], [0.6, 0.4])}
}fetchData = (size) => {return new Promise((resolve, reject) => {const randTime = Math.random() * 2;const status = this.random([0, 1, 2], [0.2, 0.2, 0.6]);setTimeout(() => {if (status < 2) {reject({status,dataList: [],});} else {resolve({status,dataList: [...Array(size)].map(i => this.getResult()),});}}, randTime * 1000);});
}這樣就大功告成啦！完美收官，看看結果把：
fetchData(5).then(res => console.log(JSON.stringify(res, '', 4))).catch(e => console.warn(e))
// 輸出結果
{"dataList": [{"creator_status": 3,"entrance_msg": "null","level": 1,"notification": {"apply_pass": 1}},{"creator_status": 4,"entrance_msg": "","level": 1,"notification": {}},{"creator_status": 1,"entrance_msg": "恭喜你中獎啦！","level": 1,"notification": {}},{"creator_status": 2,"entrance_msg": "null","level": 2,"notification": {}},{"creator_status": 4,"entrance_msg": "恭喜你中獎啦！","level": 2,"notification": {"apply_pass": 1}}],"status": 2
}寫在最后
一定要多跑幾次哦。有可能結果是一樣的，不要驚訝不要彷徨！多跑幾次就會出現其他結果啦！
其實咱也不用這么大費周章，現成的數據模擬就有：EasyMock 等等。只是我只需要前期用用，而且是在內部使用，所以沒必要去接入這個，自己就寫點數據玩玩而已啦！
歡迎提問和指正錯誤，我會第一時間和您取得溝通，下期我們再會吧！
)
