zoukankan      html  css  js  c++  java
  • vue-resource请求超时timeout设置

    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

  • 相关阅读:
    swagger在线文档配置
    SpringBoot中使用Shiro和JWT做认证和鉴权
    Java web基础
    spring boot基础
    spring MVC基础
    IDEA破解(自动重置试用期)
    Linux常用jar包启动停止脚本sh命令
    Docker Desktop 容器与镜像的保存和导入
    字符串有长度限制吗
    Thyemleaf报错: Method call: Attempted to call method *** on null context object
  • 原文地址:https://www.cnblogs.com/grj001/p/12222983.html
Copyright © 2011-2022 走看看