vue接口总是请求超时_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);returnresponse;

})

})

页面中用到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)//如果超时输出408returnresponse;

})

})

页面请求设置

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值