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;
  })
}

注意: 當 abort() 被呼叫的時候,fetch() 回傳的 Promise 會被以 AbortError 拒絕。

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

規格

Specification Status Comment
DOM
The definition of 'AbortController' in that specification.
Living Standard 初始定義

瀏覽器相容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
AbortController
Experimental
Chrome Full support 66Edge Full support 16Firefox Full support 57IE No support NoOpera Full support 53Safari Partial support 11.1
Notes
Partial support 11.1
Notes
Notes Even though window.AbortController is defined, it doesn't really abort fetch requests. See bug 174980.
WebView Android Full support 66Chrome Android Full support 66Firefox Android Full support 57Opera Android Full support 47Safari iOS Partial support 11.3
Notes
Partial support 11.3
Notes
Notes Even though window.AbortController is defined, it doesn't really abort fetch requests. See bug 174980.
Samsung Internet Android No support No
AbortController() constructor
Experimental
Chrome Full support 66Edge Full support 16Firefox Full support 57IE No support NoOpera Full support 53Safari Full support 11.1WebView Android Full support 66Chrome Android Full support 66Firefox Android Full support 57Opera Android Full support 47Safari iOS Full support 11.3Samsung Internet Android No support No
abort
Experimental
Chrome Full support 66Edge Full support 16Firefox Full support 57IE No support NoOpera Full support 53Safari Full support 11.1WebView Android Full support 66Chrome Android Full support 66Firefox Android Full support 57Opera Android Full support 47Safari iOS Full support 11.3Samsung Internet Android No support No
signal
Experimental
Chrome Full support 66Edge Full support 16Firefox Full support 57IE No support NoOpera Full support 53Safari Full support 11.1WebView Android Full support 66Chrome Android Full support 66Firefox Android Full support 57Opera Android Full support 47Safari iOS Full support 11.3Samsung Internet Android No support No

Legend

Full support  
Full support
Partial support  
Partial support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.

參見