axios超時timeout攔截

應用場景：

在網絡請求中，可能不可避免的會遇到網絡差或者請求超時的狀況，這時候，若是你採用的技術是axios，那就能夠經過設置攔截器捕獲這個異常狀況，並作出下一步處理。

 

代碼實踐：

① 設置攔截器，返回timeout的錯誤信息

// main.js
import Vue from 'vue'
import App from './App'

// 原型上掛載axios,便於全局使用
Vue.prototype.axios = axios
// 設置axios的返回攔截（還能夠設置request攔截，這裏暫時用不上）
axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if(error.message.includes('timeout')){   // 判斷請求異常信息中是否含有超時timeout字符串
      console.log("錯誤回調", error);
      alert("網絡超時");
      return Promise.reject(error);          // reject這個錯誤信息
    }
    return Promise.reject(error);
  });

Vue.config.productionTip = false


/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: {
    App
  }
})

　　

② 上面已經攔截並返回了錯誤信息，接下來就是捕獲錯誤並進行回調處理

 

methods: {
  submit() {
     let params = {id: 1};
     this.axios.post(global.urlPrefix + "/aviationOrder/batchModifyDeliveryCompany",params,{ timeout: 60000 })
     .then(res => {
        // success callback
     })
     .catch(error => {
        console.log(error);  // 這裏就能拿到攔截器中返回的錯誤信息了，若是想從新發送請求，就this.submit從新調一次方法，或者是頁面給出錯誤提示，反正根據實際項目需求來處理。
        // fail callback
     });
  },  
}

 

注意：

此方法的侷限性在於全部網絡超時都被reject了，若是不在axios調用中去catch的話，這個錯誤就被吞了，因此，建議，在reject的同時，無論三七二十二，都給出頁面提示。