資訊專欄INFORMATION COLUMN
摘要：本文客戶端為先講個(gè)故事類(lèi)似這種支持的已經(jīng)很友好了，請(qǐng)求成功后我們可以從的中拿到后端返回的數(shù)據(jù)。比如數(shù)據(jù)在中，這意味著我們每個(gè)請(qǐng)求都需要多做一次處理才能拿到實(shí)際的數(shù)據(jù)。要解除上述苦惱，我們需要對(duì)所有的接口請(qǐng)求做統(tǒng)一的封裝。
本文http客戶端為axios先講個(gè)故事
類(lèi)似axios這種支持Promise的API已經(jīng)很友好了，請(qǐng)求成功后我們可以從then的Response中拿到后端返回的數(shù)據(jù)。比如：
axios.get("/user/12345")
.then((response) => {
console.log(response);
})
.catch((error) => {
console.log(error);
});
數(shù)據(jù)在response.data中，這意味著我們每個(gè)請(qǐng)求都需要多做一次處理才能拿到實(shí)際的數(shù)據(jù)。
然后，實(shí)際場(chǎng)景后端基本不會(huì)直接把數(shù)據(jù)給我們，他會(huì)做一層封裝，比如response.data的結(jié)構(gòu)會(huì)是這樣：
{
"date": "2017-12-14 15:21:38",
"success": true,
"obj": {
...
},
"version": "V1.0"
}
所以，response.data.obj才是我們真正要的數(shù)據(jù)啊喂，所以我們每個(gè)請(qǐng)求都需要再多做一次處理=_=
突然有一天，后端說(shuō)，“response.data不再是對(duì)象，改成了JSON字符串，你做一下處理~”。
然后是的，每個(gè)接口，是每一個(gè)，我們都需要改成JSON.parse(response.data).obj，半條命哦！
如果，后端再說(shuō)，“我又改回對(duì)象了，你撤銷(xiāo)之前的處理吧~”。。。
如果，后端又說(shuō)，“不是所有的都是對(duì)象，有一些還是JSON字符串，具體你看下更新的接口文檔~”。。。
如果，我們不曾相遇。。。
ES6 Proxy用于修改某些操作的默認(rèn)行為，等同于在語(yǔ)言層面做出修改，所以屬于一種“元編程”（meta programming），即對(duì)編程語(yǔ)言進(jìn)行編程。
Proxy可以理解成，在目標(biāo)對(duì)象之前架設(shè)一層“攔截”，外界對(duì)該對(duì)象的訪問(wèn)，都必須先通過(guò)這層攔截，因此提供了一種機(jī)制，可以對(duì)外界的訪問(wèn)進(jìn)行過(guò)濾和改寫(xiě)。
要解除上述苦惱，我們需要對(duì)所有的接口請(qǐng)求做統(tǒng)一的封裝。如此一來(lái)，就算后端改來(lái)改去，我們只需修改一個(gè)地方甚至不用修改！
const apiService = new Proxy(axios, {
get (target, propKey, receiver) {
return function (...args) {
return target[propKey](...args)
.then((res) => {
const resData = typeof res.data === "string" ? JSON.parse(res.data) : res.data;
return typeof resData.obj === "string" ? JSON.parse(resData.obj) : resData.obj;
})
.catch((err) => {
throw err;
});
}
}
});
對(duì)應(yīng)的接口請(qǐng)求部分改為：
apiService.get("/user/12345")
.then((data) => {
console.log(data);
})
.catch((error) => {
console.log(error);
});
“你隨便改，我改一下算我輸！”
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/92119.html
摘要：本文的介紹的是如何設(shè)計(jì)一個(gè)通用的可以以較小的侵入性，自動(dòng)上報(bào)前端的性能數(shù)據(jù)。具體的做法可以看我的上一篇文章在單頁(yè)應(yīng)用中，如何優(yōu)雅的監(jiān)聽(tīng)的變化。三如何上報(bào)性能數(shù)據(jù)那么如何上報(bào)性能數(shù)據(jù)呢，我們第一反應(yīng)就是通過(guò)請(qǐng)求的形式來(lái)上報(bào)前端性能數(shù)據(jù)。 ??最近在做一個(gè)較為通用的前端性能監(jiān)控平臺(tái)，區(qū)別于前端異常監(jiān)控，前端的性能監(jiān)控主要需要上報(bào)和展示的是前端的性能數(shù)據(jù)，包括首頁(yè)渲染時(shí)間、每個(gè)頁(yè)面的白屏?xí)r...
摘要：本文的介紹的是如何設(shè)計(jì)一個(gè)通用的可以以較小的侵入性，自動(dòng)上報(bào)前端的性能數(shù)據(jù)。具體的做法可以看我的上一篇文章在單頁(yè)應(yīng)用中，如何優(yōu)雅的監(jiān)聽(tīng)的變化。三如何上報(bào)性能數(shù)據(jù)那么如何上報(bào)性能數(shù)據(jù)呢，我們第一反應(yīng)就是通過(guò)請(qǐng)求的形式來(lái)上報(bào)前端性能數(shù)據(jù)。 ??最近在做一個(gè)較為通用的前端性能監(jiān)控平臺(tái)，區(qū)別于前端異常監(jiān)控，前端的性能監(jiān)控主要需要上報(bào)和展示的是前端的性能數(shù)據(jù)，包括首頁(yè)渲染時(shí)間、每個(gè)頁(yè)面的白屏?xí)r...
摘要：本文的介紹的是如何設(shè)計(jì)一個(gè)通用的可以以較小的侵入性，自動(dòng)上報(bào)前端的性能數(shù)據(jù)。具體的做法可以看我的上一篇文章在單頁(yè)應(yīng)用中，如何優(yōu)雅的監(jiān)聽(tīng)的變化。三如何上報(bào)性能數(shù)據(jù)那么如何上報(bào)性能數(shù)據(jù)呢，我們第一反應(yīng)就是通過(guò)請(qǐng)求的形式來(lái)上報(bào)前端性能數(shù)據(jù)。 ??最近在做一個(gè)較為通用的前端性能監(jiān)控平臺(tái)，區(qū)別于前端異常監(jiān)控，前端的性能監(jiān)控主要需要上報(bào)和展示的是前端的性能數(shù)據(jù)，包括首頁(yè)渲染時(shí)間、每個(gè)頁(yè)面的白屏?xí)r...
摘要：二需要處理哪些異常對(duì)于前端來(lái)說(shuō)，我們可做的異常捕獲還真不少?？偨Y(jié)一下，大概如下語(yǔ)法錯(cuò)誤代碼異常請(qǐng)求異常靜態(tài)資源加載異常異常異常跨域崩潰和卡頓下面我會(huì)針對(duì)每種具體情況來(lái)說(shuō)明如何處理這些異常。 前端一直是距離用戶最近的一層，隨著產(chǎn)品的日益完善，我們會(huì)更加注重用戶體驗(yàn)，而前端異常卻如鯁在喉，甚是煩人。一、為什么要處理異常？異常是不可控的，會(huì)影響最終的呈現(xiàn)結(jié)果，但是我們有充分的理由去做這樣的事...
閱讀 3307·2021-11-12 10:36
閱讀 1454·2019-08-30 15:56
閱讀 2553·2019-08-30 11:26
閱讀 646·2019-08-29 13:00
閱讀 3662·2019-08-28 18:08
閱讀 2822·2019-08-26 17:18
閱讀 1962·2019-08-26 13:26
閱讀 2488·2019-08-26 11:39
