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

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

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

Anrufbeitrag

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

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

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!