前言：

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

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

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

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

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

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

目標(biāo)分析

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

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

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

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

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

解決問(wèn)題

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

廢話就不扯那個(gè)淡，首先最直接方法，固定寫(xiě)好。

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

有人說(shuō)，這個(gè)我也會(huì)，我還會(huì)給他加個(gè) setTimeout 函數(shù)，更加像：

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

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

喂，醒醒....咋能不能有點(diǎn)追求。

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

low， 咱能不能對(duì)自己要求高一點(diǎn)。

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

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

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

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

low, 咱能不能再高級(jí)點(diǎn)，好歹也是前端高級(jí)猿類(lèi)。

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

getResult = () => {return {creator_status: this.random([1, 2, 3, 4], [0.2, 0.2, 0.1, 0.5]),entrance_msg: this.random(['', void 0, '恭喜你中獎(jiǎng)啦！', '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": "恭喜你中獎(jiǎng)啦！","level": 1,"notification": {}},{"creator_status": 2,"entrance_msg": "null","level": 2,"notification": {}},{"creator_status": 4,"entrance_msg": "恭喜你中獎(jiǎng)啦！","level": 2,"notification": {"apply_pass": 1}}],"status": 2 }

寫(xiě)在最后

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

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

歡迎提問(wèn)和指正錯(cuò)誤，我會(huì)第一時(shí)間和您取得溝通，下期我們?cè)贂?huì)吧！

總結(jié)

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

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