此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
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 请求、各种响应主体或者流的消耗。
In this article
语法
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)。
规范
| Specification |
|---|
| DOM> # ref-for-dom-abortcontroller-abortcontroller①> |