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.jsimport 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的同时，不管出现不出现，都给出页面提示。