vue頁面切換中斷ajax請求

項目中遇到個問題，客戶端要等服務端操作3到4秒後才能返回結果，這時候用戶退出頁面ajax請求還在進行，會影響性能。
axios中提供了兩種方式解決中斷ajax問題，這裏我就說我用的這種。

在main.js中加入以下代碼；

Vue.prototype.$http= axios;
const CancelToken = axios.CancelToken;
let cancel;

Vue.prototype.post = function(url,data,loading){ //制定post方法
  	var ajax = Vue.prototype.$http({
	          	method: 'post',
	          	url:url,
	          	data: data,
	          	cancelToken: new CancelToken(c => {  //強行中斷
	            	cancel = c
	          	})
	        }).then(res =>res)  //請求成功後的代碼
			.catch(error=>{   //中斷請求和請求出錯的處理
	        	if(error.message == "interrupt"){  //判斷是中斷請求還是錯誤
					console.log('已中斷請求')
	        		return;
	        	}else{       //連接服務器請求錯誤的處理方式
	        		Toast({
	        				 message: '請檢查網絡連接',
	        				 position: 'bottom',
	        				 duration: 1300
	        			});
	        	}   		 	
			})
  	return ajax;
};

router.beforeEach((to, from, next) => {   //路由切換檢測是否強行中斷，
	if(cancel){        //強行中斷時才向下執行
		cancel('interrupt');   //給個標誌，中斷請求
	}
	next();	
});

頁面中調用,不需要catch了。

         this.post(Url,{

			}).then(res=>{
				if(ret.data.code==200){
					
				}else{

				}
			})

如果操作成功的話，應該是這樣的