AbortController

AbortController 介面代表一個控制器物件，讓你可以在需要時中斷一個或多個 DOM 請求。

你可以使用 AbortController.AbortController() (en-US) 建立一個新的 AbortController 物件。與 DOM 請求溝通時則是使用 AbortSignal (en-US) 物件。

AbortController.AbortController() (en-US)

建立一個新的 AbortController 物件實體。

AbortController.signal (en-US) Read only

回傳一個 AbortSignal (en-US) 物件實體，可以用來中斷一個 DOM 請求、或是與其溝通。

AbortController.abort() (en-US)

在一個 DOM 請求完成前中斷他。這可以用來中斷 fetch 請求 (en-US)、對任何 Response Body 的讀取、或是資料流。

在下面的程式碼片段中，我們要用 Fetch API 來下載一部影片。

我們首先用 AbortController() (en-US) 建立一個控制器，然後透過 AbortController.signal (en-US) 屬性取得他的 AbortSignal (en-US) 物件。

在初始化 fetch 請求 的時候，我們把 AbortSignal 作為選項傳入該請求的選項物件中（參考下方的 {signal}）。這樣會把剛才的中斷訊號與控制器跟 fetch 請求關聯起來，讓我們可以透過呼叫 AbortController.abort() (en-US) 來中斷該請求。請參考下方範例中第二個事件處理器。

var controller = new AbortController();
var signal = controller.signal;

var downloadBtn = document.querySelector('.download');
var abortBtn = document.querySelector('.abort');

downloadBtn.addEventListener('click', fetchVideo);

abortBtn.addEventListener('click', function() {
  controller.abort();
  console.log('下載已中斷');
});

function fetchVideo() {
  ...
  fetch(url, {signal}).then(function(response) {
    ...
  }).catch(function(e) {
    reports.textContent = '下載錯誤: ' + e.message;
  })
}

在 GitHub 有個完整的範例可供參考 — 請參見 abort-api（或是也可以實際體驗看看）。

• Fetch API
• Abortable Fetch by Jake Archibald