axios 的攔截器理解與使用

第一步創建實例

let http = axios.create({
// 這個里面可以設置一些請求頭之類的配置
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