How to implement vue+axios interrupt request when switching pages-JS Tutorial-php.cn

How to implement vue+axios interrupt request when switching pages

php中世界最好的语言

Release： 2018-04-12 11:22:31

Original

3110 people have browsed it

This time I will show you how to implement vue axios to interrupt the request when switching pages. What are the things to pay attention to when implementing vue axios to interrupt the request when switching pages? The following is a practical case, let's take a look. .

is as follows:

Vue.prototype.$ajax=axios; 
const CancelToken = axios.CancelToken;
let cancel;
let cancelAjaxText = '中断成功';
Vue.prototype.post = function(url,data,loading){
 	var ajax = Vue.prototype.$ajax({
	   	method: 'post',
	   	url:url,
	   	data: data,
	   	cancelToken: new CancelToken(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(() => {
			   	  
			  });
	  	}
		 		 	
			})
 	return ajax;
};

Copy after login

Connect to axios and add cancelToken data in the POST method. In the else above, interrupt requests and request errors will go there, so use a msg to identify it (because

Interface

also has a msg in the return, unify it) ;

The following is the method of interrupting the request, which is placed in the listening router of

routingswitch.beforeEach, cancel is the method of interrupting, which is taken out from the cancelToken of the post

Vue.prototype.cancelAjax = function(){ //切换页面强行中断请求 router.beforeEach中用到 
 if(cancel){ 
  cancel(cancelAjaxText); 
 } 
}

Copy after login

rrree

Calling post

router.beforeEach((to, from, next) => { 
<span style="white-space:pre;"> </span>Vue.prototype.cancelAjax()  
 next(); 
});

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!