Dans Vue, axios est utilisé pour implémenter la méthode de demande d'interruption lors du changement de page.

Maintenant, je vais partager avec vous un article sur la façon dont vue axios interrompt la méthode de requête ajax lors du changement de page. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

est le suivant :

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, ajoutez les données CancelToken dans la méthode POST et interrompez la requête dans le reste ci-dessus S'il y a une erreur avec la requête, elle ira là, utilisez donc un msg pour l'identifier (car il y a aussi un msg dans le retour de l'interface, unifiez-le

Ce qui suit) ; méthode d'interruption de la requête, qui est placée sur le routeur d'écoute du commutateur de routage. Dans beforeEach, Cancel est la méthode d'interruption utilisée. à partir du CancelToken de la publication des appels

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

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir. Articles connexes :

Analyse détaillée de la définition du délai setTimeout sur 0

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

Implémentation JS de la déduplication d'ensemble, de l'intersection, de l'union, de la différence Définir un exemple de fonction

Organisation des attributs de données-[*] dans Bootstrap

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!