Maison > interface Web > js tutoriel > le corps du texte

Comment interrompre la requête lors du changement de page vue axios

php中世界最好的语言
Libérer: 2018-03-28 13:41:11
original
3714 Les gens l'ont consulté

Cette fois, je vais vous montrer comment interrompre la requête lors du changement de page vue axios. Quelles sont les précautions pour interrompre la requête lors du changement de page vue axios. Ce qui suit est un cas pratique, allons-y. jetez un oeil.

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;
};
Copier après la connexion

Connectez-vous à axios, ajoutez les données CancelToken dans la méthode POST, ailleurs 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 , unifiez-le

Le) ; Voici la méthode d'interruption de la requête, placée dans le routeur d'écoute. Avant chaque commutation route, Cancel est la méthode d'interruption, qui est retirée du CancelToken dans le message

Vue.prototype.cancelAjax = function(){ //切换页面强行中断请求 router.beforeEach中用到 
 if(cancel){ 
  cancel(cancelAjaxText); 
 } 
}
Copier après la connexion
router.beforeEach((to, from, next) => { 
<span style="white-space:pre;"> </span>Vue.prototype.cancelAjax()  
 next(); 
});
Copier après la connexion

Appelez le 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); 
    } 
   })
Copier après la connexion

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article Pour un contenu plus passionnant. , veuillez faire attention au site Web php chinois autres articles liés !

Lecture recommandée :

Explication détaillée de l'utilisation de la copie profonde et superficielle de JS

La différence entre la méthode et calculé dans Vue

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal