当前位置:   article > 正文

Vue中 ,vue-resource 设置请求超时(timeout)后,做出对应响应_vue-resource.esm.超时

vue-resource.esm.超时

需求描述

在 HTTP 的请求时,若远程网络失去响应则会返回超时响应,但是前端会一直显示等待状态,现在想将在收到超时响应后,前端也进行一定的提示

问题解决方式

通过查询资料,了解到 vue-resource 组件中的interceptors已经提供了这种问题的解决方式。(timeout)

具体解决过程

1. vue-resource 中 inteceptor 的基本介绍

拦截器可以在请求发送前和发送请求后做一些处理。下面是 inteceptor 的请求拦截方式:
inteceptor 的请求拦截方式

2. inteceptor 的基本用法

Vue.http.interceptors.push((request, next) => {
		// ...
		// 请求发送前的处理逻辑
		// ...
	next((response) => {
		// ...
		// 请求发送后的处理逻辑
		// ...
		// 根据请求的状态,response参数会返回给successCallback或errorCallback
		return response
	})
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

3. 使用 inteceptor 解决本问题

3.1 超时之后可以在then的第二个error方法中获取(推荐

3.1.1 在 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;
    })
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
3.1.2 在 页面请求设置 中进行全局的请求拦截方式
this.$http.get(`repairs/${this.repairs_id}`,{
                params:{with:'room;user'},
                _timeout:100,//设置超时时间
            }).then((response)=>{
            },(err)=>{
                console.log(err.status);//如果超时,此处输出408
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

3.2 超时之后会调用请求中的onTimeoutd方法,then方法不会执行

3.2.1 在 main.js 中进行全局的请求拦截方式
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;
    })
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
3.2.2 在 页面请求设置 中进行全局的请求拦截方式
this.$http.get('url',{
            params:{.......},
       ......
           _timeout:3000,
           onTimeout: (request) => {
               alert("请求超时");
           }
     }).then((response)=>{
               
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/不正经/article/detail/610957
推荐阅读
相关标签
  

闽ICP备14008679号