AbortController
注意:此功能在Web Workers中可用。
AbortController
接口表示一个控制器对象,允许您根据需要中止一个或多个 Web 请求。
您可以使用AbortController()
构造函数创建一个新的 AbortController
对象。与异步操作的通信是使用AbortSignal
对象完成的。
构造函数
AbortController()
-
创建一个新的
AbortController
对象实例。
实例属性
AbortController.signal
只读-
返回一个
AbortSignal
对象实例,可用于与异步操作通信或中止异步操作。
实例方法
AbortController.abort()
-
在异步操作完成之前中止它。这能够中止fetch 请求、任何响应体的使用以及流。
示例
注意:AbortSignal
参考中提供了其他示例。
在以下代码片段中,我们的目标是使用Fetch API下载视频。
我们首先使用AbortController()
构造函数创建一个控制器,然后使用AbortController.signal
属性获取对与其关联的AbortSignal
对象的引用。
当fetch 请求发起时,我们在请求的选项对象(下面的 {signal}
)中将 AbortSignal
作为选项传入。这将信号和控制器与 fetch 请求关联起来,并允许我们通过调用AbortController.abort()
来中止它,如下面的第二个事件侦听器中所示。
当调用 abort()
时,fetch()
promise 会以名为 AbortError
的 DOMException
拒绝。
js
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("Download aborted");
}
});
async function fetchVideo() {
controller = new AbortController();
const signal = controller.signal;
try {
const response = await fetch(url, { signal });
console.log("Download complete", response);
// process response further
} catch (err) {
console.error(`Download error: ${err.message}`);
}
}
如果在 fetch()
调用已完成但响应体尚未读取之前中止请求,则尝试读取响应体将以 AbortError
异常拒绝。
js
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();
// The next line will throw `AbortError`
const text = await response.text();
console.log(text);
}
您可以在GitHub 上找到完整的可运行示例;您也可以看到它在线运行。
规范
规范 |
---|
DOM 标准 # interface-abortcontroller |
浏览器兼容性
BCD 表格仅在启用 JavaScript 的浏览器中加载。
另请参阅
- Fetch API
- 可中止的 Fetch,作者 Jake Archibald