Comment implémenter la demande d'interruption vue+axios lors du changement de page

Cette fois je vais vous montrer comment implémenter vue+axios pour interrompre la requête lors du changement de page. Quelles sont les précautions pour implémenter vue+axios pour interrompre la requête lors du changement de page. Voici des cas pratiques. , jetons un coup d'œil ensemble.

ressemble à ceci :

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;
};

Connectez-vous à axios et ajoutez les données CancelToken dans la méthode POST. Dans le reste ci-dessus, les requêtes d'interruption et les erreurs de requête y iront, utilisez donc un msg pour l'identifier (car il y a aussi un msg dans le retour de l'interface , alors unifiez-le) ;

Ce qui suit est la méthode d'interruption de la requête, qui est placée dans le routeur d'écoute du commutateur routage Dans avantChacun, annuler est la méthode d'interruption, qui est. retiré du CancelToken du post

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(); 
});

Call post

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes. sur le site PHP chinois !

Lecture recommandée :

Explication détaillée de l'utilisation des types de données js

Explication détaillée des étapes d'utilisation de deep et copie superficielle de JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!