Heim > Web-Frontend > js-Tutorial > So implementieren Sie die Vue+Axios-Interrupt-Anfrage beim Seitenwechsel

So implementieren Sie die Vue+Axios-Interrupt-Anfrage beim Seitenwechsel

php中世界最好的语言
Freigeben: 2018-04-12 11:22:31
Original
3171 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie vue+axios implementieren, um die Anfrage beim Seitenwechsel zu unterbrechen. Was sind die Vorsichtsmaßnahmen, um vue+axios zu implementieren, um die Anfrage beim Seitenwechsel zu unterbrechen? Praktischer Fall, schauen wir uns das gemeinsam an.

sieht so aus:

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

Stellen Sie eine Verbindung zu axios her und fügen Sie cancelToken-Daten in der POST-Methode hinzu. Im oben genannten else werden Interrupt-Anforderungen und Anforderungsfehler dorthin gesendet. Verwenden Sie daher eine Nachricht, um sie zu identifizieren (da es auch eine Nachricht in der Rückgabe der -Schnittstelle , also vereinheitlichen Sie es) ;

Das Folgende ist die Methode zum Unterbrechen der Anforderung, die im Routing-Switch platziert wird. In vorJedem ist Abbrechen die Methode zum Unterbrechen aus dem cancelToken des Beitrags entfernt

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

Anrufbeitrag

<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
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung von js-Datentypen

Detaillierte Erläuterung der Schritte zur Verwendung von Deep und flache Kopie von JS

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Vue+Axios-Interrupt-Anfrage beim Seitenwechsel. 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