關(guān)于前端ajax請求的優(yōu)雅方案（http客戶端為axios）

前言

AJAX，Asynchronous JavaScript and XML (異步的JavaScript和XML)，一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)方案。

異步的JavaScript：

使用 【JavaScript語言】 以及 相關(guān)【瀏覽器提供類庫】 的功能向服務(wù)端發(fā)送請求，當(dāng)服務(wù)端處理完請求之后，【自動執(zhí)行某個(gè)JavaScript的回調(diào)函數(shù)】。

PS：以上請求和響應(yīng)的整個(gè)過程是【偷偷】進(jìn)行的，頁面上無任何感知。

下面話不多說了，來一看看本文的正文。

本文http客戶端為axios

先講個(gè)故事

類似axios這種支持Promise的API已經(jīng)很友好了，請求成功后我們可以從then的Response中拿到后端返回的數(shù)據(jù)。比如：

axios.get('/user/12345')
 .then((response) => {
 console.log(response);
 })
 .catch((error) => {
 console.log(error);
 });

數(shù)據(jù)在response.data中，這意味著我們每個(gè)請求都需要多做一次處理才能拿到實(shí)際的數(shù)據(jù)。

然后，實(shí)際場景后端基本不會直接把數(shù)據(jù)給我們，他會做一層封裝，比如response.data的結(jié)構(gòu)會是這樣：

{
 "date": "2017-12-14 15:21:38",
 "success": true,
 "obj": {
 ...
 },
 "version": "V1.0"
}

所以，response.data.obj才是我們真正要的數(shù)據(jù)啊喂，所以我們每個(gè)請求都需要再多做一次處理=_=

突然有一天，后端說，“response.data不再是對象，改成了JSON字符串，你做一下處理~”。

然后是的，每個(gè)接口，是每一個(gè)，我們都需要改成JSON.parse(response.data).obj，半條命哦！

如果，后端再說，“我又改回對象了，你撤銷之前的處理吧~”。。。

如果，后端又說，“不是所有的都是對象，有一些還是JSON字符串，具體你看下更新的接口文檔~”。。。

如果，我們不曾相遇。。。

后來的我們

ES6 Proxy用于修改某些操作的默認(rèn)行為，等同于在語言層面做出修改，所以屬于一種“元編程”（meta programming），即對編程語言進(jìn)行編程。

Proxy可以理解成，在目標(biāo)對象之前架設(shè)一層“攔截”，外界對該對象的訪問，都必須先通過這層攔截，因此提供了一種機(jī)制，可以對外界的訪問進(jìn)行過濾和改寫。

要解除上述苦惱，我們需要對所有的接口請求做統(tǒng)一的封裝。如此一來，就算后端改來改去，我們只需修改一個(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;
 });
 }
 }
});

對應(yīng)的接口請求部分改為：

apiService.get('/user/12345')
 .then((data) => {
 console.log(data);
 })
 .catch((error) => {
 console.log(error);
 });

“你隨便改，我改一下算我輸！”

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。