AbortController

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

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

AbortController.AbortController()

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

AbortController.signal Read only

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

AbortController.abort()

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

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

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

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

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