vue axios unterbricht die Anforderungsmethode beim Seitenwechsel

Der folgende Redakteur wird mit Ihnen einen Artikel über die Unterbrechung der Ajax-Anforderungsmethode beim Seitenwechsel teilen. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich ist. Folgen wir dem Editor, um einen Blick darauf zu werfen

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, in Fügen Sie cancelToken-Daten zur POST-Methode hinzu. Wohin gehen die Interrupt-Anforderung und der Anforderungsfehler? Verwenden Sie daher eine Nachricht, um sie zu identifizieren (da es auch eine Nachricht in der Schnittstellenrückgabe gibt, vereinheitlichen Sie sie). 🎜>

Das Folgende ist die Methode zum Unterbrechen der Anforderung, die im abhörenden Router platziert wird. Vor jedem Routing-Schalter ist Abbrechen die Methode zum Unterbrechen, die aus dem CancelToken des Beitrags entnommen wird 🎜>

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

Anrufbeitrag

Die oben genannte Vue Axios Interrupt-Anforderungsmethode Ajax beim Seitenwechsel ist alles Ich hoffe, dass der Inhalt, den der Herausgeber mit Ihnen geteilt hat, für Sie nützlich sein kann. Eine Referenz, und ich hoffe, dass jeder die chinesische PHP-Website unterstützt.

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

Verwandte Empfehlungen:

Tab (TabBar am unteren Rand des Fensters) Seitenwechselimplementierung für die WeChat-Applet-Entwicklung

Jquery kombiniert mit HTML-Implementierung Englischer Seitenwechsel

Der über das offizielle WeChat-Kontomenü eingegebene Seitenwechsel schlug zum zweiten Mal fehl

Das obige ist der detaillierte Inhalt vonvue axios unterbricht die Anforderungsmethode beim Seitenwechsel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!