Axios學習(4)---axios攔截器、錯誤處理與取消請求

Axios學習(4)—axios攔截器、錯誤處理與取消請求

一、攔截器

1. 什麼攔截器？

   在請求前或響應被處理前攔截他們，分爲兩種：請求攔截器與響應攔截器

2. 攔截器的使用方法

   • 請求攔截器

       //   請求攔截器
       axios.interceptors.request.use(config => {
         // 在發送請求前做些什麼
         return config;
       }, err=>{
           // 在請求錯誤的時候的邏輯處理
           return Promise.reject(err)
       });
   

   • 響應攔截器

       // 響應攔截器
       axios.interceptors.response.use(res => {
         // 在請求成功後的數據處理
         return res;
       }, err=>{
           // 在響應錯誤的時候的邏輯處理
           return Promise.reject(err)
       });
   

   • 取消攔截器

       let inter = axios.interceptors.request.use(config=>{
           config.header={
               auth:true
           }
           return config
       })
       axios.interceptors.request.eject(inter)
   

3. 實用舉例A：登錄權限

   • 需要token的接口實例

       // 需要token的接口
       let instance = axios.create({});
       instance.interceptors.request.use(config=>{
           config.headers.token = '';
           return config
       })
   

   • 不需要token的接口實例

       // 不需要token接口
       let newInstance = axios.create({});
   

4. 實用舉例B：移動端開發數據加載loading動畫

       // 請求的加載動畫loading
       let instance_phone = axios.create({});
       instance_phone.interceptors.request.use(config=>{
           $('#loading').show();
           return config
       })
       instance_phone.interceptors.response.use(res=>{
           $('#loading').hide();
           return res
       })
   

   備註：實現的效果是請求數據的時候顯示loading動畫，數據響應後隱藏loading動畫。

   ---

二、錯誤處理

結合請求攔截器與響應攔截器來說，不管是請求錯誤還是響應錯誤，都會執行catch方法。

		//  請求攔截器
    axios.interceptors.request.use(
      config => {
        // 在發送請求前做些什麼
        return config;
      },
      err => {
        // 在請求錯誤的時候的邏輯處理
        return Promise.reject(err);
      }
    );
    // 響應攔截器
    axios.interceptors.response.use(
      res => {
        // 在請求成功後的數據處理
        return res;
      },
      err => {
        // 在響應錯誤的時候的邏輯處理
        return Promise.reject(err);
      }
    ); 
		axios
      .get("data.json")
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        console.log(res);
      });

---

三、錯誤處理舉例

在實際開發中，不會再每次網絡請求的時候，使用catch方法，可以添加統一的錯誤處理方法。代碼如下：

    //   請求錯誤處理
    let instance = axios.create({});
    instance.interceptors.request.use(
      config => {
        return config;
      },
      err => {
        // 請求錯誤的常見狀態碼：4XX  401-請求超時  404-mot found
        $("#error").show();
        setTimeout(()=>{
           $("#error").hide(); 
        }, 2000)
        return Promise.reject(err);
      }
    );
    // 響應錯誤處理
    instance.interceptors.response.use(
      res => {
        return res;
      },
      err => {
        // 響應錯誤的常見狀態碼 5XX 500-服務器錯誤 502-服務器重啓
        $("#error").show();
        setTimeout(()=>{
           $("#error").hide(); 
        }, 2000)
        return Promise.reject(err);
      }
    );
    instance.get("/data.json").then(res=>{
        console.log(res,'請求成功')
    }).catch(err=>{
        console.log(err,'除了攔截器設置的處理之外的其他處理')
    })

思路分析：首先創建實例，給實例設置請求攔截器與響應攔截器。

• （1）請求錯誤的常見狀態碼以4開頭，如401-請求超時、404-接口未找到；

• （2）響應錯誤的常見狀態碼以5開頭，如500-服務器錯誤、502-服務器重啓等。

• （3）處理設置請求攔截器與響應攔截器的操作外，如果還要其他操作，我們可以在請求的時候，在使用catch方法。

---

四、取消請求（不常用）

• 代碼示例：

let source = axios.CancelToken.source();
    axios
      .get("/data.json", {
        cancelToken: source.token
      })
      .then(res => {
        console.log(res);
      }).catch(err=>{
          console.log(err)
      })
    //   取消請求(參數msg)
      source.cancel('自定的的字符串可選')

---

• 應用場景

在查詢數據的時候，很長時間（3-5s）仍未獲取數據，這個時候需要取消請求。