前端请求接口post_前端如何优雅地模拟接口请求?(给你的代码加点小意外)
前言:
作為一名前端開(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)題。
- 上一篇: 海信vidaa和海信电视有什么区别
- 下一篇: 怎么把网页保存到本地计算机,在IE浏览器