技術標籤：vueaxioscancelTokenjavascript

在某些業務下，如由於網路延遲等原因造成使用者等待時間過長，需要取消該操作，那麼就需要取消該操作發起的http請求。
axios官方提供了cancelToken的構造方法去取消已發起的http請求，那麼該如何使用呢？

以下例項是在vue專案下進行測試的：

步驟：
1.首先在main.js檔案中，引入axios請求佇列

Vue.$httpRequestList = [];

2.在axios配置檔案(http.js)中，配置axios的cancelToken構造方法

axios.defaults.cancelToken =
 
 new axios.CancelToken(function (){

})

3.在介面統一管理檔案(api.js)中，發起請求的介面新增進httpRequestList佇列中

// 這是某個post請求
export const postRequest = params => {
	return axios.post('介面地址',params,
	{
		cancelToken: new axios.cancelToken(function executor(c){
			Vue.$httpRequestList.push(c);
		})
	})
}

// 終止axios佇列中的請求
 

export const cancelRequest = () => {
	if(Vue.$httpRequestList.length>0){
		Vue.$httpRequestList.forEach((item)=>{
			item();
		});
		Vue.$httpRequestList = [];
	}
}

4.在需要取消axios請求佇列時，呼叫cancelRequest方法即可