此頁面由社群從英文翻譯而來。了解更多並加入 MDN Web Docs 社群。
AbortController
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2019年3月.
備註： 此功能可在Web Worker 中使用。
AbortController 介面表示一個控制器物件，允許你在需要時中止一個或多個 Web 請求。
你可以使用AbortController() 建構子來建立新的AbortController 物件。與非同步操作的通訊是透過AbortSignal 物件完成的。
建構子
AbortController()建立一個新的
AbortController物件實例。
實例屬性
AbortController.signalRead only回傳一個
AbortSignal物件實例，可用於與非同步操作進行通訊或中止操作。
實例方法
AbortController.abort()在非同步操作完成之前中止該操作。這可以中止fetch 請求、任何回應主體的消耗以及串流。
範例
備註：在AbortSignal 參考中有更多範例。
在以下範例中，我們嘗試使用Fetch API 下載一個影片。
我們首先使用AbortController() 建構子建立一個控制器，然後使用AbortController.signal 屬性獲取其關聯的AbortSignal 物件。
當fetch 請求初始化時，我們將AbortSignal 作為選項的一部分（如下的{signal}）傳遞到請求的選項物件中。這將信號和控制器與 fetch 請求關聯起來，並允許我們通過調用AbortController.abort() 來中止它，如以下第二個事件監聽器所示。
當abort() 被調用時，fetch() 的 promise 會以名為AbortError 的DOMException 被拒絕。
let controller;const url = "video.mp4";const downloadBtn = document.querySelector(".download");const abortBtn = document.querySelector(".abort");downloadBtn.addEventListener("click", fetchVideo);abortBtn.addEventListener("click", () => { if (controller) { controller.abort(); console.log("下載已中止"); }});async function fetchVideo() { controller = new AbortController(); const signal = controller.signal; try { const response = await fetch(url, { signal }); console.log("下載完成", response); // 進一步處理回應 } catch (err) { console.error(`下載錯誤：${err.message}`); }}如果在fetch() 呼叫兌現後但在回應主體被讀取之前中止請求，那麼嘗試讀取回應主體將會以AbortError 例外被拒絕。
async function get() { const controller = new AbortController(); const request = new Request("https://example.org/get", { signal: controller.signal, }); const response = await fetch(request); controller.abort(); // 下一行將拋出 `AbortError` const text = await response.text(); console.log(text);}你可以在GitHub 上找到完整的範例；你也可以查看線上運行範例。
規範
| Specification |
|---|
| DOM # interface-abortcontroller |
瀏覽器相容性
參見
- Fetch API
- Abortable Fetch，来自 Jake Archibald