AbortController
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2019.
AbortController
接口表示一个控制器对象,允许你根据需要中止一个或多个 Web 请求。
你可以使用 AbortController.AbortController()
构造函数创建一个新的 AbortController
。使用 AbortSignal
对象可以完成与 DOM 请求的通信。
构造函数
AbortController.AbortController()
-
创建一个新的
AbortController
对象实例。
属性
AbortController.signal
只读-
返回一个
AbortSignal
对象实例,可以用它与一个 DOM 请求进行通信或者中止该请求。
方法
AbortController.abort()
-
中止一个尚未完成的 Web(网络)请求。这能够中止 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 Standard # interface-abortcontroller |
浏览器兼容性
BCD tables only load in the browser
参见
- Fetch API
- Abortable Fetch by Jake Archibald