페이지 전환 시 vue+axis 인터럽트 요청을 구현하는 방법

이번에는 페이지 전환 시 요청을 중단하기 위해 vue+axios를 구현하는 방법을 보여드리겠습니다. 페이지 전환 시 vue+axios가 요청을 중단할 때 구현할 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

모양은 다음과 같습니다:

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

axios에 연결하고 POST 메서드에 cancelToken 데이터를 추가합니다. 위의 else에서는 인터럽트 요청과 요청 오류가 거기로 이동하므로 메시지를 사용하여 이를 식별합니다( 인터페이스 에도 반환 메시지가 있으므로 이를 통합하세요).

다음은 요청을 중단하는 방법으로 routingswitching listening router에 배치됩니다.before각 cancel은 중단 방법으로 게시물의 cancelToken에서 가져옵니다

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

전화 게시

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

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

js 데이터 유형 사용에 대한 자세한 설명

JS의 깊고 얕은 복사를 사용하는 단계에 대한 자세한 설명

위 내용은 페이지 전환 시 vue+axis 인터럽트 요청을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!