AbortController

基线 广泛可用

此功能已得到良好确立,并且可在许多设备和浏览器版本中使用。它已在浏览器中可用,自 2019年3月.

注意:此功能在Web Workers中可用。

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

您可以使用AbortController() 构造函数创建一个新的 AbortController 对象。与异步操作的通信是使用AbortSignal 对象完成的。

构造函数

AbortController()

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

实例属性

AbortController.signal 只读

返回一个AbortSignal 对象实例,可用于与异步操作通信或中止异步操作。

实例方法

AbortController.abort()

在异步操作完成之前中止它。这能够中止fetch 请求、任何响应体的使用以及流。

示例

注意:AbortSignal 参考中提供了其他示例。

在以下代码片段中,我们的目标是使用Fetch API下载视频。

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

fetch 请求发起时,我们在请求的选项对象(下面的 {signal})中将 AbortSignal 作为选项传入。这将信号和控制器与 fetch 请求关联起来,并允许我们通过调用AbortController.abort() 来中止它,如下面的第二个事件侦听器中所示。

当调用 abort() 时,fetch() promise 会以名为 AbortErrorDOMException 拒绝。

js
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("Download aborted");
  }
});

async function fetchVideo() {
  controller = new AbortController();
  const signal = controller.signal;

  try {
    const response = await fetch(url, { signal });
    console.log("Download complete", response);
    // process response further
  } catch (err) {
    console.error(`Download error: ${err.message}`);
  }
}

如果在 fetch() 调用已完成但响应体尚未读取之前中止请求,则尝试读取响应体将以 AbortError 异常拒绝。

js
async function get() {
  const controller = new AbortController();
  const request = new Request("https://example.org/get", {
    signal: controller.signal,
  });

  const response = await fetch(request);
  controller.abort();
  // The next line will throw `AbortError`
  const text = await response.text();
  console.log(text);
}

您可以在GitHub 上找到完整的可运行示例;您也可以看到它在线运行

规范

规范
DOM 标准
# interface-abortcontroller

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅