[axios] interceptor 攔截器

在 axios 實體中可以掛載 interceptor 攔截器，在 request 發出或 response 回來之前攔截加料 (?)。藉此實現統一加入資料、統一 error handling 等操作。

用法也蠻直白簡單，直接看範例就很好理解：

攔截 request

import axios from 'axios';
import store from 'your/store/path/store'
export default function setup() {
    axios.interceptors.request.use(function(config) {
        // do something
        return config;
    }, function(err) {
        return Promise.reject(err);
    });
}

得到的 config 大概長這樣，就是發起請求的完整內容：

{
  "url": "/api",
  "method": "get",
  "params": {
    "id": 1,
  },
  "headers": {
    "common": {
      "Accept": "application/json, text/plain, */*"
    },
    "delete": {},
    "get": {},
    "head": {},
    "post": {
      "Content-Type": "application/x-www-form-urlencoded"
    },
    "put": {
      "Content-Type": "application/x-www-form-urlencoded"
    },
    "patch": {
      "Content-Type": "application/x-www-form-urlencoded"
    }
  },
  "baseURL": "http://172.16.1.183:83",
  "transformRequest": [
    null
  ],
  "transformResponse": [
    null
  ],
  "timeout": 1000,
  "xsrfCookieName": "XSRF-TOKEN",
  "xsrfHeaderName": "X-XSRF-TOKEN",
  "maxContentLength": -1
}

post 情況大同小異，只是 params 以 data 取代：

{
  "url": "/api/login",
  "method": "post",
  "data": {
    "email": "",
    "password": ""
  },
  "headers": {
   ...
  },
  "baseURL": "",
  ...
}

攔截 response，錯誤部分記得要 reject 才會進 catch。

axios.interceptors.response.use(
    response => {
        // do something
        return response
    },
    error => {
        // do something
        return Promise.reject(error)
    }
)

自己遇到的小卡關：

一開始想要把攔截器拉出去獨立 js，但裡面的操作又用到很多 Vue 掛載的套件，諸如 router, store, $vs (vuesax), $acl (vue-acl) 等等，拉出去就各式各樣 undefined 噴出來～

最後的解法是使用全域 Mixin，在 App created 時掛載攔截器，避免掉套件存取不到問題。

但相信應該有更好的做法，如果有任何建議請留言告訴我～