axios超时timeout拦截

应用场景：

在网络请求中，可能不可避免的会遇到网络差或者请求超时的情况，这时候，如果你采用的技术是axios，那就可以通过设置拦截器捕获这个异常情况，并做出下一步处理。

代码实践：

① 设置拦截器，返回timeout的错误信息

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

// main.js import Vue from 'vue' import App from './App' <br>// 原型上挂载axios,便于全局使用 Vue.prototype.axios = axios // 设置axios的返回拦截（还可以设置request拦截，这里暂时用不上） axios.interceptors.response.use(   response => {     return response;   },   error => {     if(error.message.includes('timeout')){   // 判断请求异常信息中是否含有超时timeout字符串       console.log("错误回调", error);<br>      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   } })

　　

② 上面已经拦截并返回了错误信息，接下来就是捕获错误并进行回调处理

1 2 3 4 5 6 7 8 9 10 11 12

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重新调一次方法，或者是页面给出错误提示，反正根据实际项目需求来处理。<br>        // fail callback      });   },  }

注意：

此方法的局限性在于所有网络超时都被reject了，如果不在axios调用中去catch的话，这个错误就被吞了，所以，建议，在reject的同时，不管出现不出现，都给出页面提示。