AbortController

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() 去中止它,如下面的第二个事件监听器。

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("中止下载");
  }
});

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 一个名为 AbortErrorDOMException

你可以在 GitHub 上找到这个示例的完整源代码(也可以在线运行)。

规范

Specification
DOM Standard
# interface-abortcontroller

浏览器兼容性

BCD tables only load in the browser

参见