此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

AbortController:AbortController() 构造函数

基线 广泛可用

自 2019年3月 起,此特性已在主流浏览器中得到支持,可在大多数设备和浏览器版本中正常使用。

备注: 此特性在 Web Worker 中可用。

AbortController() 构造函数创建了一个新的 AbortController 实例。

语法

js
new AbortController()

参数

无。

示例

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

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

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

js
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 上找到一个完整的使用示例——参见 abort-api也可以看在线演示)。

规范

规范
DOM
# ref-for-dom-abortcontroller-abortcontroller①

浏览器兼容性

参见