vue-resource请求超时timeout设置
请求超时设置通过拦截器Vue.http.interceptors实现具体代码如下
main.js里在全局拦截器中添加请求超时的方法
方法1：超时之后会调用请求中的onTimeoutd方法，then方法不会执行
Vue.http.interceptors.push((request, next) => {
let timeout;
// 如果某个请求设置了_timeout,那么超过该时间，会终端该（abort）请求,并执行请求设置的钩子函数onTimeout方法，不会执行then方法。
if (request._timeout) {
timeout = setTimeout(() => {
if(request.onTimeout) {
request.onTimeout(request);
request.abort()
}
}, request._timeout);
}
next((response) => {
clearTimeout(timeout);
return response;
})
})
页面中用到vue-resource请求的地方如下设置即可。
this.$http.get('url',{
params:{.......},
......
_timeout:3000,
onTimeout: (request) => {
alert("请求超时");
}
}).then((response)=>{
});
方法2：超时之后可以在then的第二个error方法中获取，私以为这个方法更好一些
main.js中设置如下
Vue.http.interceptors.push((request, next) => {
let timeout;
// 這裡改用 _timeout
if (request._timeout) {
timeout = setTimeout(() => {
//自定义响应体 status:408,statustext:"请求超时"，并返回给下下边的next
next(request.respondWith(request.body, {
status: 408,
statusText: '请求超时'
}));
}, request._timeout);
}
next((response) => {
console.log(response.status)//如果超时输出408
return response;
})
})
页面请求设置
this.$http.get(`repairs/${this.repairs_id}`,{
params:{with:'room;user'},
_timeout:100,//设置超时时间
}).then((response)=>{
},(err)=>{
console.log(err.status);//如果超时，此处输出408
});
/**
* ,%%%%%%%%,
* ,%%/\%%%%/\%%
* ,%%%c "" J/%%%
* %. %%%%/ o o \%%%
* `%%. %%%% _ |%%%
* `%% `%%%%(__Y__)%%'
* // ;%%%%`-/%%%'
* (( / `%%%%%%%'
* \ .' |
* \ / | |
* \/ ) | |
* /_ | |__
* (___________))))))) 攻城湿
*
* _ _
* __ _(_)_ _(_) __ _ _ __
* / / / / |/ _` |'_
* V /| | V /| | (_| | | | |
* \_/ |_| \_/ |_|\__,_|_| |_|
*/ 参考文章 https://segmentfault.com/q/1010000005800495/a-1020000005802004