前端 ajax 請求的優雅方案

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

「你隨便改，我改一下算我輸！」