axios 源碼解析(下) 攔截器的詳解

axios的除了初始化配置外，其它有用的應該就是攔截器了，攔截器分為請求攔截器和響應攔截器兩種:
　　請求攔截器    ;在請求發送前進行一些操作，例如在每個請求體裡加上token，統一做了處理如果以後要改也非常容易。
　　響應攔截器    ;是在接收到響應後進行一些操作，例如在伺服器返回登錄狀態失效，需要重新登錄的時候，跳轉到登錄頁。
請求攔截器可以在請求前攔截數據，格式:

axios.interceptors.request.use(function (config) {
    //在發送請求之前做些什麼
    return config;
}, function (error) {
    //對請求錯誤做些什麼
    return Promise.reject(error);
});

請求攔截器內處理完畢後需要返回參數，也就是config這個配置參數

writer by:大沙漠 QQ:22969969

響應攔截器是在接收到響應後進行一些操作，格式:

axios.interceptors.response.use(function (response) {
    //對響應數據做點什麼
    return response;
}, function (error) {
    //對響應錯誤做點什麼
    return Promise.reject(error);
});

請求攔截器內處理完畢後需要返回參數1，也就是response這個響應頭

攔截器設置後返回的是該攔截器在內部數組的一個索引，可以調用對應攔截器的eject(index)來移除攔截器，格式:

let id1 = axios.interceptors.request.use(function(config){        //添加一個請求攔截器
    console.log(config)
    return config;
},function(err){})
axios.interceptors.request.eject(id1)                             //移除該請求攔截器

let id2 = axios.interceptors.response.use(function(response){     //添加一個響應攔截器
    console.log(response)
    return response;
},function(err){})
axios.interceptors.response.eject(id2)                            //移除該響應攔截器

當然，我們可以同時添加一個或多個攔截器，只要將參數返回就可以了

如果在element-ui+vue的項目中，經常用到的一個場景就是通過滾動條來自動設置載入中的圖標。

axios在初始化的時候調用createInstance創建實例的時候執行了一條utils.extend(instance, context);代碼，這行代碼執行完後返回的實例就可以通過axios.interceptors去設置攔截器了。

axios對攔截器的實現是通過./lib/core/InterceptorManager模塊來管理的，當我們調用axios.interceptors.request.use或者axios.interceptors.response.use添加攔截器時都會執行到InterceptorManager原型上的use()方法，如下:

InterceptorManager.prototype.use = function use(fulfilled, rejected) {    //添加一個新的攔截器  fulfilled:成功函數 rejected:失敗函數
  this.handlers.push({                                                      //添加到this.handlers數組裡面
    fulfilled: fulfilled,
    rejected: rejected
  });
  return this.handlers.length - 1;                                          //返回索引
};

就是新增到thishandlers而已，對於移除來說，是執行InterceptorManager原型上的eject()方法，如下:

InterceptorManager.prototype.eject = function eject(id) {               //移除一個攔截器 id:該攔截器的索引
  if (this.handlers[id]) {                                                //如果存在
    this.handlers[id] = null;                                               //則設置其為null
  }
};

就是簡單的把值設置為null，然後發送axios(config)向伺服器發送請求時，在做派發更新前會優先執行請求攔截器，等到數據接收後會執行響應攔截器，有不懂的歡迎留言!