AbortController.signal

AbortController 接口的只读属性 signal 返回一个 AbortSignal 实例对象,该对象可以根据需要处理 DOM 请求通信,既可以建立通信,也可以终止通信。

一个 AbortSignal 实例对象。

示例

在下面的这段代码中,我们将通过 Fetch API 来下载一段视频。

首先通过 AbortController() 构造函数来创建一个 controller 实例,然后通过 AbortController.signal 属性获取到它的关联对象 AbortSignal 的引用。

fetch request 初始化后,将 AbortSignal 作为一个选项传入请求的 options 对象中(如下 {signal})。这将 signal 和 controller 与 fetch 请求关联起来,允许我们通过调用 AbortController.abort() 来取消 fetch 请求,正如下第二个事件监听器所示。

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 上找到完整的可以运行的示例;你还可以看它的在线演示

规范

Specification
DOM Standard
# ref-for-dom-abortcontroller-signal②

浏览器兼容性

BCD tables only load in the browser

参见