AbortController - 用于中止一个或多个 DOM 请求

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

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

构造函数

AbortController()

创建一个新的 AbortController 对象实例。

属性

AbortController.signal 只读

返回一个 AbortSignal 对象实例，该实例可用于与 DOM 请求通信 / 中止该请求。

方法

AbortController.abort()

在 DOM 请求完成之前中止它。这样可以中止 fetch 请求。

实例

在以下代码段中，我们使用 Fetch API 下载视频。

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

当启动 fetch 请求时，我们将 AbortSignal 作为选项传递到请求的选项对象中（请参见下面的 {signal}）。这将信号和控制器与获取请求相关联，并允许我们通过调用 AbortController.abort() 来中止信号，如下面在第二个事件侦听器中所示。

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

var downloadBtn = document.querySelector('.download');
var abortBtn = document.querySelector('.abort');

downloadBtn.addEventListener('click', fetchVideo);

abortBtn.addEventListener('click', function() {
  controller.abort();
  console.log('下载中止');
});

function fetchVideo() {
  ...
  fetch(url, {signal}).then(function(response) {
    ...
  }).catch(function(e) {
    reports.textContent = '下载错误：' + e.message;
  })
}

注意：当调用 abort() 时，fetch() promise 将拒绝，参数是一个名为 AbortError 的 DOMException。

您可以在 GitHub 上找到完整的工作实例 — 请参阅 abort-api（也可以在线运行）。

规范

规范	状态	备注
DOM AbortController 的定义	现行的标准	初始定义

桌面浏览器兼容性

移动浏览器兼容性

1. 即使定义了 window.AbortController，它也不会真正中止获取请求。参见 bug 174980。

相关链接

• Fetch API
• 可中止的 Fetch 作者：Jake Archibald