此页面由社区从英文翻译而来。了解更多并加入 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 |
浏览器兼容性
Loading...
参见
- Fetch API
- Jake Archibald 的可中止的 Fetch