AbortController：abort() 方法

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 接口的 abort() 方法会在一个异步操作完成之前中止它。它能够中止 fetch 请求、各种响应主体或者流的消耗。

语法

abort()
abort(reason)

参数

reason 可选: 操作中止的原因，可以是各种 JavaScript 值。如果没有指定，则将原因设置为“AbortError”DOMException。

返回值

无（undefined）。

示例

以下片段中，我们将使用 Fetch API 下载一个视频。

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

当 fetch 请求初始化时，我们将 AbortSignal 作为一个选项传递进入请求的选项对象中（下面的 {signal}）。这将 signal 和 controller 与 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 将会抛出 DOMException 类型的 Error（名称为 AbortError）。

你可以在 github 上找到完整的工作示例；你还可以看它的在线演示。

规范

Specification
DOM # ref-for-dom-abortcontroller-abortcontroller①

浏览器兼容性

参见

Fetch API