Heim > Web-Frontend > js-Tutorial > So unterbrechen Sie die Anfrage beim Wechseln der Vue-Axios-Seiten

So unterbrechen Sie die Anfrage beim Wechseln der Vue-Axios-Seiten

php中世界最好的语言
Freigeben: 2018-03-28 13:41:11
Original
3741 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie die Anfrage beim Wechseln der Vue-Axios-Seite unterbrechen. Was sind die Vorsichtsmaßnahmen zum Unterbrechen der Anfrage beim Wechseln der Vue-Axios-Seite? Schauen Sie mal rein.

lautet wie folgt:

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;
};
Nach dem Login kopieren

Mit Axios verbinden, cancelToken-Daten in der POST-Methode hinzufügen, in else oben, Interrupt-Anforderungen und Anforderungsfehler werden dorthin gesendet. Verwenden Sie daher eine Nachricht, um sie zu identifizieren (da es auch eine Nachricht in der Rückgabe der -Schnittstelle gibt, vereinheitlichen Sie sie). Das Folgende ist die Methode zum Unterbrechen der Anforderung, die im abhörenden Router platziert wird. Vor jeder

Route

-Umschaltung ist Abbrechen die Unterbrechungsmethode, die aus dem cancelToken im Beitrag

Vue.prototype.cancelAjax = function(){ //切换页面强行中断请求 router.beforeEach中用到 
 if(cancel){ 
  cancel(cancelAjaxText); 
 } 
}
Nach dem Login kopieren
Anrufbeitrag
router.beforeEach((to, from, next) => { 
<span style="white-space:pre;"> </span>Vue.prototype.cancelAjax()  
 next(); 
});
Nach dem Login kopieren

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Für weitere spannende Inhalte Bitte achten Sie auf die chinesische PHP-Website Andere

verwandte Artikel!
<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); 
    } 
   })
Nach dem Login kopieren

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung von tiefem und flachem Kopieren von JS

Der Unterschied zwischen Methode und berechnet in Vue

Das obige ist der detaillierte Inhalt vonSo unterbrechen Sie die Anfrage beim Wechseln der Vue-Axios-Seiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage