前端ajax請求的優雅方案怎麼實現

這次帶給大家前端ajax請求的優雅方案怎麼實現，實現前端ajax請求的優雅方案的注意事項有哪些，下面就是實戰案例，一起來看一下。

前言

AJAX，Asynchronous JavaScript and XML (非同步的JavaScript和XML)，一個建立互動式網頁應用的網頁開發技術方案。

異步的JavaScript：

使用【JavaScript語言】 以及相關【瀏覽器提供類別庫】 的功能向服務端發送請求，當服務端處理完請求之後，【自動執行某個JavaScript的回呼函數】。

PS：以上請求和回應的整個過程是【偷偷】進行的，頁面上無任何感知。

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

本文http客戶端為axios

先講個故事

類似axios這種支援Promise的API已經很友善了，請求成功後我們可以從then的Response拿到後端回傳的資料。例如：

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

資料在response.data中，這意味著我們每個請求都需要多做一次處理才能拿到實際的資料。

然後，實際場景後端基本上不會直接把資料給我們，他會做一層封裝，例如response.data的結構會是這樣：

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

所以，response.data.obj才是我們真正要的資料啊餵，所以我們每個請求都需要再多做一次處理=_=

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

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

如果，後端再說，「我又改回物件了，你撤銷之前的處理吧~」。 。 。

如果，後端又說，「不是所有的都是對象，有一些還是JSON字串，具體你看下更新的介面文件~」。 。 。

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

後來的我們

ES6 Proxy用來修改某些運算的預設行為，等同於在語言層面做出修改，所以屬於一種「元程式設計」（meta programming），即對程式語言進行程式設計。

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

要解除上述苦惱，我們需要對所有的介面請求做統一的封裝。如此一來，就算後端改來改去，我們只需修改一個地方甚至不用修改！

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

對應的介面請求部分改為：

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

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

實作改變狀態和刪除無刷新的Ajax+PHP程式碼

Ajax如何實作客戶端非同步呼叫服務端

#

以上是前端ajax請求的優雅方案怎麼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！