AbortController: AbortController() 构造函数

基线广泛可用

此功能已十分成熟，可以在许多设备和浏览器版本上正常使用。它从以下日期开始在浏览器中可用： 2019 年 3 月.

注意：此功能在 Web Workers 中可用。

AbortController() 构造函数创建一个新的 AbortController 对象实例。

语法

new AbortController()

参数

无。

示例

在以下代码片段中，我们的目标是使用 Fetch API 下载视频。

我们首先使用 AbortController() 构造函数创建一个控制器，然后使用 AbortController.signal 属性获取其关联的 AbortSignal 对象的引用。

当 fetch 请求被发起时，我们将 AbortSignal 作为选项传递给请求的选项对象（下面的 { signal }）。这将信号和控制器与 fetch 请求关联起来，并允许我们通过调用 AbortController.abort() 来中止它，如以下第二个事件监听器中所示。

const controller = new AbortController();
const signal = controller.signal;

const url = "video.mp4";
const downloadBtn = document.querySelector(".download");
const abortBtn = document.querySelector(".abort");

downloadBtn.addEventListener("click", fetchVideo);

abortBtn.addEventListener("click", () => {
  controller.abort();
  console.log("Download aborted");
});

function fetchVideo() {
  fetch(url, { signal })
    .then((response) => {
      console.log("Download complete", response);
    })
    .catch((err) => {
      console.error(`Download error: ${err.message}`);
    });
}

注意：当调用 abort() 时，fetch() Promise 会拒绝并抛出一个 AbortError 错误。

您可以在 GitHub 上找到完整的运行示例；您也可以看到它在线运行。

规范

规范
DOM 标准 # ref-for-dom-abortcontroller-abortcontroller①

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见

Fetch API