前言：

作為一名前端開發(fā)程序猿，每天都被產(chǎn)品經(jīng)理催著開發(fā)，項目一啟動，產(chǎn)品就過來了。噓寒問暖：大胸弟，你啥時開始做啊？一般我們都會直接告訴TA，你先找接口解決數(shù)據(jù)問題。

而我們也會經(jīng)常遇見“巧婦難為無米之炊”的難題，難道我們離開后端數(shù)據(jù)就不能生存啦？最近忙于某個項目，也遇到了這事，那我是怎么去解決的叻？容我娓娓道來。

所謂天才第一步，XXX啥褲。開個玩笑，我們肯定是需要先搞清楚我們想干啥。只有明確了目標(biāo)，才能減少走彎路。 需求：

• 模擬發(fā)送請求
• 模擬數(shù)據(jù)回傳
• 本地開發(fā)實現(xiàn)

這三步中，模擬發(fā)送請求，這個目標(biāo)對于我們前端來說，它并不重要，后端是比較看重你給什么參數(shù)，我好還你啥數(shù)據(jù)。

所以我們前端要做好模擬數(shù)據(jù)回傳，這樣才能更好的跟后端去約定字段，數(shù)據(jù)結(jié)構(gòu)相關(guān)的。有了數(shù)據(jù)，我們才能更好的去實現(xiàn)功能開發(fā)。

目標(biāo)分析

模擬數(shù)據(jù)回傳，標(biāo)準(zhǔn)的接口組成，由兩部分組成：

• 數(shù)據(jù)結(jié)果
• 請求狀態(tài)

說到這里，我就忍不住的打開了瀏覽器調(diào)試模式。我正大光明的瞄了眼知乎的請求，比如這個接口：

https://www.zhihu.com/api/v4/creator/apply

那我們到底本地怎么模擬數(shù)據(jù)了？

解決問題

到了最后一步，咱們猿類最關(guān)心的問題，你說你洋洋灑灑說了一大堆廢話，你倒是上代碼啊！（我等著ctrl+c, ctrl+v 訥。我不創(chuàng)造代碼，我只是代碼的搬運工。）

廢話就不扯那個淡，首先最直接方法，固定寫好。

const result = {creator_status: 1entrance_msg: ""level: 1notification: {apply_pass: 0}status: 2 }

有人說，這個我也會，我還會給他加個 setTimeout 函數(shù)，更加像：

setTimeout(() => {this.setState({...result,}) }, 2000)

嘿，突然發(fā)現(xiàn)自己是個天才，簡直跟接口回調(diào)一毛一樣。

喂，醒醒....咋能不能有點追求。

哦，是不是嫌數(shù)據(jù)少了，我再復(fù)制幾次。

low， 咱能不能對自己要求高一點。

我們應(yīng)該讓數(shù)據(jù)更加可變，并且還可以模擬異步調(diào)用。所以，我們來改造一下。

首先用 js 實現(xiàn)一個概率函數(shù)，對，就是那個隨機抽獎函數(shù)。網(wǎng)上隨手找了一個：

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;}

這個簡單，不就是把這個隨機函數(shù)加到數(shù)據(jù)上去就好啦。

low, 咱能不能再高級點，好歹也是前端高級猿類。

我們可以這樣：(還可以刺激地加點錯誤數(shù)據(jù)，吃不吃雞，意不意外，驚不驚喜。翻譯翻譯，啥叫驚喜，來，咱看一看。)

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);}); }

這樣就大功告成啦！完美收官，看看結(jié)果把：

fetchData(5).then(res => console.log(JSON.stringify(res, '', 4))).catch(e => console.warn(e)) // 輸出結(jié)果 {"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 }

寫在最后

一定要多跑幾次哦。有可能結(jié)果是一樣的，不要驚訝不要彷徨！多跑幾次就會出現(xiàn)其他結(jié)果啦！

其實咱也不用這么大費周章，現(xiàn)成的數(shù)據(jù)模擬就有：EasyMock 等等。只是我只需要前期用用，而且是在內(nèi)部使用，所以沒必要去接入這個，自己就寫點數(shù)據(jù)玩玩而已啦！

歡迎提問和指正錯誤，我會第一時間和您取得溝通，下期我們再會吧！

總結(jié)

以上是生活随笔為你收集整理的前端请求接口post_前端如何优雅地模拟接口请求？(给你的代码加点小意外)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。