剩人
剩人
  • 发布:2019-12-24 13:22
  • 更新:2020-09-30 09:57
  • 阅读:1287

页面关闭如何中断request

分类:uni-app

发现页面中的uni.request 发出后,如果页面不关闭了,请求还是在执行着。有没有方法在页面卸载后自动中断请求?

当页面的请求比较慢,如果用户不断打开新页面,请求没完成(可能等的不耐烦或者不想看了)就关闭然后打开下一个,这样会造成请求拥堵现象。

2019-12-24 13:22 负责人:无 分享
已邀请:
IT梅

IT梅 - 一个前端开发者

做请求封装
此处列举一个使用vuex的封装方式,思路是这样,如果不使用vuex,可以放在你使用的全局数据中,好用的话,麻烦点个赞同,谢谢

//vuex里  
state:{  
    requestTree:{}  
},  
action:{  
    request({state},options={}){//统一约定,请求调用此方法,如果不使用vuex,请将此方法放入你的全局方法中  
        state.requestTree[options.url]=uni.request(options)  
    },  
    abortRequest({state},options={}){//此方法会打断所有发送中请求,如果不使用vuex,请将此方法放入你的全局方法中  
        for(let name in state.requestTree){  
            state.requestTree[name].abort()  
        }  
    }  
},
//页面中调用  
    <script>    
    export default {    
        data(){    

        },    
        onLoad(){    
             this.doRequest();    
        },    
        onUnload(){    
            this.$store.disaptch('abortRequest');//如果不使用vuex,此处调用你放在全局方法中的统一abortRequest  
        },    
        methods:{    
             doRequest(){    
                 this.$store.disaptch('request',{//如果不使用vuex,此处调用你放在全局方法中的统一request  
                     url: 'https://www.example.com/request', //仅为示例,并非真实接口地址。  
                 })  
            }    
        }    
    }    
    </script>
  • hai520

    亲测有用,感谢!!!

    2020-09-30 09:52

IT梅

IT梅 - 一个前端开发者

var requestTask = uni.request({  
    url: 'https://www.example.com/request', //仅为示例,并非真实接口地址。  
    complete: ()=> {}  
});  
requestTask.abort();//这句为打断请求
剩人

剩人 (作者)

感谢您的回复。
我的理解不知道对不对,按这个思路实施的流程大概:

<script>  
export default {  
    data(){  
        requestTask:null  
    },  
    onLoad(){  
          this.doRequest();  
    },  
    onUnload(){  
           if(this.requestTask!=null){  
                    this.requestTask.abort();  
                    this.requestTask = null;  
           }  
    },  
    methods:{  
         doRequest(){  
               this.requestTask = uni.request({    
                       url: 'https://www.example.com/request', //仅为示例,并非真实接口地址。    
                      complete: ()=> { this.requestTask = null;}    
               });   
        }  
    }  
}  
</script>

以这个思路来做的话,每次都要先注册,然后退出时判断销毁比较麻烦。不知道有没有更好的办法?

  • IT梅

    放在楼下了,这里回复好像不能贴代码

    2019-12-25 10:01

剩人

剩人 (作者)

你这个思路很ok,难点在于页面之间的请求要分开,不过应该是有办法的,很感谢!

hai520

hai520

借鉴 IT梅 的思路封装的全局方法,鸣谢 IT梅

module.exports = {  
    requestTree:{},  

    request(options={}){//统一约定,请求调用此方法,如果不使用vuex,请将此方法放入你的全局方法中  
        var url = options.url;  
        var method = options.method;  
        var header = options.header || {};  
        var data = options.data || {};  

        //请求方式  
        if(method){  
            method = method.toUpperCase();  
            if(method === "POST" && JSON.stringify(header) == "{}"){  
                header = {"content-type":"application/x-www-form-urlencoded"}  
            }  
        }  

        // 发送请求 加载动画  
        if(!options.hideLoading){  
            uni.showLoading({  
                title:"加载中"  
            })  
        }  

        this.requestTree[options.url]=uni.request({  
            url : url,  
            method : method || "GET",  
            header : header,  
            data : data,  
            success : res =>{  
                if(res.statusCode && res.statusCode !== 200){  
                    console.log(res);  
                    uni.showModal({  
                        content:res.data.message  
                    })  

                    return;  
                }  

                // console.log(res)  
                typeof options.success == "function" && options.success(res.data);  
            },  
            fail: (e) => {  
                console.log(e);  
                if(e.errMsg === "request:fail abort"){  

                }else{  
                    uni.showModal({  
                        content: '请求超时'  
                    })  
                }  

                typeof options.fail == "function" && options.fail(e.data);  
            },  
            complete: (e) => {  

                uni.hideLoading();  
                typeof options.complete == "function" && options.complete(e.data);  

                return;  
            }  
        });  
    },  

    abortRequest(options={}){//此方法会打断所有发送中请求,如果不使用vuex,请将此方法放入你的全局方法中  
        for(let name in this.requestTree){  
            console.log(name);  
            this.requestTree[name].abort();  
        }  
    }  

};

要回复问题请先登录注册