Movatterモバイル変換


[0]ホーム

URL:


  1. 面向开发者的 Web 技术
  2. Web API
  3. AbortController
  4. AbortController:abort() 方法

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

View in EnglishAlways switch to English

AbortController:abort() 方法

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2019年3月.

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

AbortController 接口的abort() 方法会在一个异步操作完成之前中止它。它能够中止fetch 请求、各种响应主体或者流的消耗。

语法

js
abort()abort(reason)

参数

reason可选

操作中止的原因,可以是各种 JavaScript 值。如果没有指定,则将原因设置为“AbortError”DOMException

返回值

无(undefined)。

示例

以下片段中,我们将使用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 将会抛出DOMException 类型的Error(名称为AbortError)。

你可以在 github 上找到完整的工作示例;你还可以看它的在线演示

规范

Specification
DOM
# ref-for-dom-abortcontroller-abortcontroller①

浏览器兼容性

参见

Help improve MDN

Learn how to contribute

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2026 Movatter.jp