AbortController

AbortController 接口表示一个控制器对象，允许你根据需要中止一个或多个 Web 请求。

你可以使用 AbortController.AbortController() 构造函数创建一个新的 AbortController。使用 AbortSignal 对象可以完成与 DOM 请求的通信。

构造函数

AbortController.AbortController(): 创建一个新的 AbortController 对象实例。

属性

AbortController.signal 只读: 返回一个 AbortSignal 对象实例，它可以用来 with/abort 一个 Web（网络）请求。

方法

AbortController.abort(): 中止一个尚未完成的 Web（网络）请求。这能够中止 fetch 请求及任何响应体的消费和流。

示例

备注： AbortSignal 中还有其他额外的示例。

在下面的代码片段中，我们想通过 Fetch API 下载一段视频。

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

当 fetch 请求初始化时，我们将 AbortSignal 作为一个选项传递进入请求的选项对象中（下面的 {signal}）。这将 signal 和 controller 与 fetch 请求相关联，并且允许我们通过调用 AbortController.abort() 去中止它，如下面的第二个事件监听器。

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 Standard # interface-abortcontroller

浏览器兼容性

BCD tables only load in the browser

参见

Fetch API
Abortable Fetch by Jake Archibald