In Vue wird Axios verwendet, um die Interrupt-Anforderungsmethode beim Seitenwechsel zu implementieren.

Jetzt werde ich mit Ihnen einen Artikel darüber teilen, wie Vue Axios die Anforderungsmethode Ajax beim Seitenwechsel unterbricht. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist.

Wie unten gezeigt:

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, im obigen Beispiel die Anfrage unterbrechen und request Jeder Fehler wird dort angezeigt, also verwenden Sie eine Nachricht, um ihn zu identifizieren (da es auch eine Nachricht in der Schnittstelle gibt, vereinheitlichen Sie sie).

Das Folgende ist die Methode zum Unterbrechen der Anfrage wird im abhörenden Router platziert. Vor jeder Routenumschaltung ist Abbrechen die Interrupt-Methode, und das aus dem Abbruch-Token des Beitrags entnommene

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

wird als Beitrag < bezeichnet 🎜>

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

Das Obige habe ich zusammengestellt. Für alle hoffe ich, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Detaillierte Analyse der Einstellung der setTimeout-Zeit auf 0

JS-Implementierung von Set-Deduplizierung, Schnittmenge, Vereinigung, Differenz Funktionsbeispiel festlegen

Organisation von Daten-[*]-Attributen in Bootstrap

Das obige ist der detaillierte Inhalt vonIn Vue wird Axios verwendet, um die Interrupt-Anforderungsmethode beim Seitenwechsel zu implementieren.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!