AbortSignal - 表示中止 DOM 请求的信号对象

AbortSignal 接口表示一个信号对象，该对象允许您与 DOM 请求（例如 Fetch）进行通信，并在需要时通过 AbortController 对象中止该请求。

属性

AbortSignal 接口还从其父接口 EventTarget 继承了属性。

AbortSignal.aborted 只读

一个 Boolean，指示信号正在与之通信的请求是否被中止。

事件

使用 addEventListener() 或通过为此接口的 oneventname 属性分配事件监听器来监听这些事件。

abort

当信号正在与之通信的 DOM 请求被中止时调用。也可以通过 onabort 属性处理。

方法

AbortSignal 接口从其父接口 EventTarget 继承了方法。

实例

在以下代码段中，我们使用 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。

当前版本的 Firefox 使用 DOMException 拒绝承诺。

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

规范

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

桌面浏览器兼容性

移动浏览器兼容性

相关链接

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