此页面由社区从英文翻译而来。了解更多并加入 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.signal只读返回一个
AbortSignal对象实例，可以用它来和异步操作进行通信或者中止这个操作。
实例方法
AbortController.abort()中止一个尚未完成的异步操作。这能够中止fetch 请求及任何响应体和流的使用。
示例
备注：AbortSignal 中还有其他额外的示例。
在下面的代码片段中，我们想通过Fetch API 下载一段视频。
我们先使用AbortController() 构造函数创建一个控制器，然后使用AbortController.signal 属性获取其关联AbortSignal 对象的引用。
当fetch 请求初始化时，我们将AbortSignal 作为一个选项传递进入请求的选项对象中（下面的{signal}）。这将 signal 和 controller 与 fetch 请求相关联，并且允许我们通过调用AbortController.abort() 去中止它，如下面的第二个事件监听器。
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("中止下载"); }});function fetchVideo() { controller = new AbortController(); const signal = controller.signal; fetch(url, { signal }) .then((response) => { console.log("下载完成", response); }) .catch((err) => { console.error(`下载错误：${err.message}`); });}备注：当abort() 被调用时，这个fetch() promise 将reject 一个名为AbortError 的DOMException。
规范
| Specification |
|---|
| DOM # interface-abortcontroller |
浏览器兼容性
参见
- Fetch API
- Jake Archibald 的可中止的 Fetch