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的同时，无论三七二十二，都给出页面提示。