這是一個實驗中的功能
此功能在某些瀏覽器尚在開發中,請參考兼容表格以得到不同瀏覽器用的前輟。
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 | 初始定義 |
瀏覽器相容性
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
AbortController | Chrome Full support 66 | Edge Full support 16 | Firefox Full support 57 | IE No support No | Opera Full support 53 | Safari
Partial support
11.1
| WebView Android Full support 66 | Chrome Android Full support 66 | Firefox Android Full support 57 | Opera Android Full support 47 | Safari iOS
Partial support
11.3
| Samsung Internet Android No support No |
AbortController() constructor | Chrome Full support 66 | Edge Full support 16 | Firefox Full support 57 | IE No support No | Opera Full support 53 | Safari Full support 11.1 | WebView Android Full support 66 | Chrome Android Full support 66 | Firefox Android Full support 57 | Opera Android Full support 47 | Safari iOS Full support 11.3 | Samsung Internet Android No support No |
abort | Chrome Full support 66 | Edge Full support 16 | Firefox Full support 57 | IE No support No | Opera Full support 53 | Safari Full support 11.1 | WebView Android Full support 66 | Chrome Android Full support 66 | Firefox Android Full support 57 | Opera Android Full support 47 | Safari iOS Full support 11.3 | Samsung Internet Android No support No |
signal | Chrome Full support 66 | Edge Full support 16 | Firefox Full support 57 | IE No support No | Opera Full support 53 | Safari Full support 11.1 | WebView Android Full support 66 | Chrome Android Full support 66 | Firefox Android Full support 57 | Opera Android Full support 47 | Safari iOS Full support 11.3 | Samsung 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.
參見
- Fetch API
- Abortable Fetch by Jake Archibald