如何實現前端ajax請求

小編給大家分享一下如何實現前端ajax請求，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

前言

AJAX，Asynchronous JavaScript and XML (異步的JavaScript和XML)，一種創建交互式網頁應用的網頁開發技術方案。

異步的JavaScript：

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

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

以上是“如何實現前端ajax請求”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！