vue axios interrupts the request method when switching pages

The editor below will share with you an article about vue axios interrupting the request method ajax when switching pages. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor and 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;
};

Connect to axios, in the POST method Add cancelToken data. In the else above, interrupt requests and request errors will go there, so use a msg to identify it (because there is also a msg in the interface return, unify it);

The following is the method of interrupting the request. It is placed in the listening router.beforeEach of the routing switch. cancel is the method of interrupting. The

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

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

taken out of the cancelToken of the post calls the post.

<span style="white-space:pre;">   </span>this.post(this.ajaxUrl + &#39;getCrTree&#39;,{ 
    devAddr : this.changeData.devAddr, 
    innerId : this.changeData.innerId, 
   }).then(ret=>{ 
    if(ret.status){ 
      
    }else{ 
     this.msg(ret.msg); 
    } 
   })

The above article about vue axios interrupting the request method ajax when switching pages is all the content shared by the editor. I hope it can give you a reference, and I also hope you can support php more. Chinese website.

Related recommendations:

WeChat applet development tab (TabBar at the bottom of the window) page switching implementation

jquery combined with html implementation English page switching

The page switching entered from the WeChat public account menu failed for the second time

The above is the detailed content of vue axios interrupts the request method when switching pages. For more information, please follow other related articles on the PHP Chinese website!