axios 的攔截器理解與使用

第一步創建實例

1 2 3 4

let  http = axios.create({ // 這個里面可以設置一些請求頭之類的配置<br>timeout: 3000, headers: {} });

第二步 設置攔截器

 　2.1 攔截器分為 請求攔截器和響應攔截器 

   //請求攔截器代碼格式如下

http.interceptors.request.use(config => {

     config.data = config.data || {};

     // 可以在這里添加全局統一的關卡  比如說token userid等等   

     // 判斷是否擁有登錄有則添加到請求參數中去 也就是 data中去  這樣只要請求就會帶   

         userid 與token，就不需要再在每個接口中寫全局統一的參數

     if  (hastoken) {

     // config.data["userId"] = store.getters.userId;

     // config.data["token"] = store.getters.token;

     }

     // 這里同上 也可以在headers中添加配置

      if (hasgps){

      config.headers.xxx = xxx;

     }

     // 然后config.data需要格式化一下

     //qs.stringify 是把一個參數對象格式化為一個字符串。

    // qs.parse 方法可以把一段格式化的字符串轉換為對象格式

     config.data = qs.stringify(config.data);

    //  最后return config

     return  config;

});   

    

 上述config對象

//響應攔截器代碼　

http.interceptors.response.use( response => {
    //攔截響應，做統一處理 
    const res = response.data;
    // 請求成功,但是接口報錯
    if (!res.result) {
    // 根據返回的錯誤碼可以做一些響應的處理
      if (res.errorCode === 10001) {
      // 處理代碼
      } else if (res.errorCode === 90000) {
      // 處理代碼
      }
     // 沒有響應代碼處理  可以返回一個Promise對象
      return Promise.reject({
        code: res.errorCode,
        msg: res.txtMessage
      });
    } else {
      return res;
    }
  },
   // 請求失敗在error中顯示出來 並返回錯誤
   // 請求攔截其中也有error  一般用不到
  error => {
    Notify({
      message: "服務端連接異常",
      color: "#FFFFFF",
      background:#FF4023"
    });
    return Promise.reject(error);
  }
);

 

 上述response對象

第三步 最后暴露實例

   export default http;

第四步  引入並使用

  import request from "@/utils/request";
    request({
    url: "/auth/get-captcha",
    method: "post",
    data: data
    });    

---

 

詳情見axios github  https://github.com/axios/axios

 

原文地址：https://www.cnblogs.com/xy1996/p/13466484.html