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.

备注： 此特性在 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() 去中止它，如下面的第二个事件监听器。

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 一个名为 AbortError 的 DOMException。

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

规范

Specification
DOM
# interface-abortcontroller

浏览器兼容性

参见