在現在的瀏覽器中，有兩種主要的方法發送請求：XMLHttpRequest 和 fetch。XMLHttpRequest 這個接口在瀏覽器中存在很長一段時間了，fetch 則是 ES2015 引入的特性。
XMLHttpRequest 可以在請求中途終止（abortable）。舉個例子：
let xhr = new XMLHttpRequest();
xhr.method = ‘GET’;
xhr.url = ‘https://slowmo.glitch.me/5000’;
xhr.open(method, url, true);
xhr.send();
// Abort the request at a later stage
abortButton.addEventListener(‘click’, function() {
xhr.abort();
});
複製代碼fetch 剛開始引入時並不支持終止請求。Github 上最早 在 2015 年就有終止 fetch 請求的提案 issue 出現。在 fetch 規範之外也有許多解決這個問題的方案，像 cancelable-promises 和其他 hacks。
終於，通用的 AbortController 和 AbortSignal API 出來了。該 API 在 DOM 標準 中定義，而不是在語言規範中定義的。
什麼是 AbortController？
DevTools 中輸出的 AbortController 函數
DOM 文檔 中有這麼一段話：
雖然 Promise 沒有提供內置的終止算法（aborting mechanism），但是許多使用它們的 API 需要終止語義。AbortController 提供一個 abort() 方法來支持這些需求，這個方法用來切換相應 AbortSignal 對象的狀態。希望支持終止功能的 API 可以接受 AbortSignal 對象，並基於其狀態來確定執行流程。
// 創建一個 AbortController 實例
const controller = new AbortController();
const signal = controller.signal;
// 監聽 abort signal（終止信號），調用 controller.abort() 後，會觸發這裏的回調
signal.addEventListener(‘abort’, () => {
console.log(signal.aborted); // true
});
// 稍後執行終止操作，這會通知給 signal 知道
controller.abort();
複製代碼
如何使用 AbortController 終止 fetch 請求？
fetch 方法的第二個參數支持配置一個 signal 選項，其值就是 AbortSignal 對象。
const controller = new AbortController();
const signal = controller.signal;
// API 3s 後返回響應
// 注意，這裏第二個參數用了一個 ‘signal’ 選項
fetch(‘https://slowmo.glitch.me/3000’, { signal })
.then(r => r.json())
.then(response => console.log(response))
.catch(err => {
if (err.name === ‘AbortError’) {
console.log(‘Fetch was aborted’);
} else {
console.error(‘Oops!’, err);
}
});
// 2s 後執行終止操作
// 這會導致 fetch 請求被終止，同時產生一個 ‘AbortError’ 錯誤。
setTimeout(() => {
controller.abort();
}, 2000);
複製代碼這種終止方式，包括終止 fetch 的請求和相應。請求失敗時，出現錯誤 new DOMException(‘Aborted’, ‘AbortError’)。
另外，同一個 AbortSignal（即上面使用的 signal）對象可以用於多個 fetch 請求。