vue axios はページを切り替えるときにリクエストメソッドを中断します

ページを切り替えるときに vue axios がリクエストメソッド ajax を中断する方法についての記事を以下のエディターで共有します。これは良い参考値なので、皆さんのお役に立てれば幸いです。エディターをフォローして一緒に見てみましょう

以下に示すように:

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 では、割り込みリクエストとリクエスト エラーがそこに送られます。したがって、メッセージを使用して識別します（インターフェイスの戻り値にもメッセージがあるため、それを統一します）;

以下は、リスニングルーターに配置されるリクエストを中断するメソッドです。 . cancel は、投稿の cancelToken にある

Vue.prototype.cancelAjax = function(){ //切换页面强行中断请求 router.beforeEach中用到 
 if(cancel){ 
  cancel(cancelAjaxText); 
 } 
}

Call post

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

が、エディターで共有されるすべての内容です。参考にしていただければ幸いです。php 中国語 Web サイトをサポートしてください。

関連する推奨事項:

WeChat アプレット開発用のタブ (ウィンドウの下部にある TabBar) ページ切り替えの実装

jquery を HTML と組み合わせて、中国語と英語のページ切り替えを実現します

WeChat公式アカウントメニューが2回目に切り替わります 無効です

以上がvue axios はページを切り替えるときにリクエストメソッドを中断しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。