一、原生ajax終止請求

1、abort()

? XMLHttpRequest.abort() 方法用于終止 XMLHttpRequest 對象的請求，該方法沒有參數，也沒有返回值。當調用該方法時，如果對應 XMLHttpRequest 對象的請求已經被發送并且正在處理中，則會中止該請求；如果請求已經完成（即已經接收到完整的響應），則不會執行任何操作。而且調用該方法后，還會觸發 XMLHttpRequest 對象的abort事件，我們可以在該事件的處理函數中執行后續相關邏輯代碼，例如清除請求相關數據等等。

? 當一個請求被終止后，該請求的readyState將會變為0，并且status屬性也會變為0。

案例代碼：

// 創建XMLHttpRequest對象
const xhr = new XMLHttpRequest();
// 請求地址
const url = "https://developer.mozilla.org/";
// 初始化請求
xhr.open('GET', url, true);
// 發送請求
xhr.send();
// 監聽取消請求
xhr.addEventListener('abort', function () {
	console.log('請求被abort()取消了');
});
// 定時器模擬取消請求
setTimeout(() => {
	// 取消請求
	xhr.abort();
	// 取消請求之后的狀態status
	console.log('abort()之后的xhr.status---', xhr.status);
	// 取消請求之后的狀態readyState
	console.log('abort()之后的xhr.readyState---', xhr.readyState);
}, 100);

執行結果：

二、axios終止請求

1、AbortController（新版本）

? 在axiso的0.22.0版本開始，需要使用瀏覽器原生的AbortController來終止請求，是目前推薦用的方法。當使用該方法終止請求時，如果對應請求已經被發送并且正在處理中，則會中止該請求；如果請求已經完成（即已經接收到完整的響應），則不會執行任何操作。

? 我們想監聽到終止請求的操作，并進行后續處理，有兩種方法：① 使用AbortController提供的onabort事件，通過監聽該事件，并綁定事件處理函數，在函數中進行后續處理。② 使用try..catch，終止請求之后，會觸發catch，在catch中進行后續處理。如果同時使用onabort事件和try..catch，則會先觸發onabort事件，再觸發try..catch。

案例代碼：

// 以vue項目中使用axios為例

// 創建請求控制器 
this.controller = new AbortController();
console.log("初始聲明的請求控制器------", this.controller);

// 第一種方法：綁定事件處理程序
this.controller.signal.addEventListener("abort", () => {
   console.log("請求已終止，觸發了onabort事件");
   // 進行后續處理
});

// 第二種方法：try...catch
try {
    // 發送文件上傳請求
    const res = await this.$axios.post(api.Upload, uploadData, {
     timeout: 0, // 設置超時時間為 0/null 表示永不超時
     signal: this.controller.signal, // 綁定取消請求的信號量
	});
} catch (error) {
    console.log("終止請求時catch的error---", error);
    // 判斷是否為取消上傳
    if (error.message == "canceled"){
        // 進行后續處理
    };
}

// 終止請求
this.controller.abort();
console.log("終止請求后的請求控制器------", this.controller);

執行結果：

? 注意：每個AbortController可以同時取消多個請求，但是只能取消請求一次，一個AbortController在終止過請求之后，其控制是否終止請求的signal.aborted屬性會從false，變為true，目前本人沒找到恢復為false的方法，暫且認為是不可恢復的吧。如果后續請求還是綁定該請求控制器，則后續請求都會被提前終止，不會被發出。

? 如果我們想要在終止請求之后，不影響后續請求的正常發出，且后續請求也是可以被終止的，那么需要在每次發出請求之前，都通過構造函數創建一個新的的 AbortController，每次請求綁定的都是新的AbortController，這樣才能做到多次請求之間不干擾。

2、CancelToken（舊版本）

? 在axiso的0.22.0之前的版本，需要使用取消令牌cancel token來終止請求，不過該API從0.22.0開始被棄用，目前已不建議再使用。當使用該方法終止請求時，如果對應請求已經被發送并且正在處理中，則會中止該請求；如果請求已經完成（即已經接收到完整的響應），則不會執行任何操作。

? 該方法只能通過try..catch來監聽取消請求操作，終止請求之后，會觸發catch，在catch中進行后續處理。而且該方法在取消請求時，可以通過參數自定義catch的error中的message內容。

案例代碼：

// 以vue項目中使用axios為例

// 這個地方需要導入原生的axios 最好不要使用二次封裝后的axios
import axios from "axios";

// 創建請求令牌
this.source = axios.CancelToken.source();
console.log("初始聲明的請求令牌---", this.source);

// 第二種方法：try...catch
try {
    // 發送文件上傳請求
    const res = await this.$axios.post(api.Upload, uploadData, {
     timeout: 0, // 設置超時時間為 0/null 表示永不超時
     cancelToken: this.source.token, // 綁定取消請求的令牌
	});
} catch (error) {
    console.log("終止請求時catch的error---", error);
    // 判斷是否為取消上傳
    if (error.message == "自定義取消請求的message"){
        // 進行后續處理
    };
}

// 終止請求
this.source.cancel("自定義取消請求的message");
console.log("取消請求后的請求令牌---", this.source);

執行結果：

? 注意：該方法與AbortController相同，都可以同時取消多個請求，但是只能取消請求一次，一個CancelToken在終止過請求之后，如果后續請求還是綁定該請求令牌，則后續請求都會被提前終止，不會被發出。

? 同理，如果我們想要在終止請求之后，不影響后續請求的正常發出，且后續請求也是可以被終止的，那么需要在每次發出請求之前，都創建一個新的的 CancelToken，每次請求綁定的都是新的CancelToken，這樣才能做到多次請求之間不干擾。

三、參考資料

Axios中文文檔

AbortController

XMLHttpRequest.abort()