vue axios 在页面切换时中断请求方法 ajax
如下所示:
Vue.prototype.$ajax=axios; constCancelToken=axios.CancelToken; letcancel; letcancelAjaxText='中断成功'; Vue.prototype.post=function(url,data,loading){ varajax=Vue.prototype.$ajax({ method:'post', url:url, data:data, cancelToken:newCancelToken(c=>{//强行中断请求要用到的 cancel=c }) }).then(res=>res.data,res=>{//中断请求和请求出错都会走这里,我这里用cancelAjaxText来区别 if(res.message==cancelAjaxText){ return{status:false,msg:cancelAjaxText} }else{ this.$confirm('登录过时,是否重新登录','提示',{ confirmButtonText:'确定', cancelButtonText:'取消', type:'warning' }).then(()=>{ window.location.href=Vue.prototype.url_head+'/'; }).catch(()=>{ }); } }) returnajax; };
接入axios,在POST方法里加入cancelToken数据,在上面else中,中断请求和请求出错都会走那里,所以用一个msg来识别(因为接口返回中也有一个msg,统一一下);
以下是中断请求的方法,放在路由切换的监听router.beforeEach中,cancel是中断的方法,在post的cancelToken里面拿出来的
Vue.prototype.cancelAjax=function(){//切换页面强行中断请求router.beforeEach中用到 if(cancel){ cancel(cancelAjaxText); } }
router.beforeEach((to,from,next)=>{Vue.prototype.cancelAjax() next(); });
调用post
this.post(this.ajaxUrl+'getCrTree',{ devAddr:this.changeData.devAddr, innerId:this.changeData.innerId, }).then(ret=>{ if(ret.status){ }else{ this.msg(ret.msg); } })
以上这篇vueaxios在页面切换时中断请求方法ajax就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。