微客导航 » 文章资讯 » vue axios 在页面切换时中断请求方法 ajax

vue axios 在页面切换时中断请求方法 ajax

2023-09-15 19:21:06 306

如下所示：

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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue axios 在页面切换时中断请求方法 ajax

热门推荐

随机推荐