AbortSignal

最新推荐文章于 2024-10-30 09:41:33 发布

xiaoxin6661111

最新推荐文章于 2024-10-30 09:41:33 发布

阅读量483

点赞数 1

文章标签：学习前端开发语言

本文链接：https://blog.csdn.net/xiaoxin6661111/article/details/125505142

版权

这篇博客介绍了如何利用AbortController和AbortSignal接口来中断DOM请求，特别是Fetch API的请求。通过创建AbortController实例，可以获取一个AbortSignal对象，并将其作为Fetch请求的选项传递。当需要中止请求时，调用AbortController的abort()方法，同时触发onabort事件。此技术有助于实现更可控的异步操作和资源管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用法解释

AbortSignal 接口表示一个信号对象（ signal object ），它允许您通过 AbortController 对象与 DOM 请求（如 Fetch）进行通信并在需要时将其中止。

属性

AbortSignal 接口还继承了其父接口EventTarget的属性。

AbortSignal.aborted 只读

以 Boolean (en-US) 表示与之通信的请求是否被终止（true）或未终止（false）。

事件处理

AbortSignal.onabort

当 abort 事件触发时，即当信号正在与之通信的 DOM 请求被中止时调用。

方法

AbortSignal 接口从其父接口 EventTarget 继承方法。

用例

在以下片段中，我们旨在使用 Fetch API 下载视频。

我们首先使用AbortController()构造函数创建一个控制器，然后使用AbortController.signal (en-US)属性。

当获取请求被启动时，我们在请求的选项对象中传递 AbortSignal 作为一个选项（见下面的{signal}）。这将信号和控制器与获取请求相关联，并允许我们通过调用AbortController.abort()来中止它，如下面的第二个事件监听器所示。

var controller = new AbortController();
var signal = controller.signal;

var downloadBtn = document.querySelector('.download');
var abortBtn = document.querySelector('.abort');

downloadBtn.addEventListener('click', fetchVideo);

abortBtn.addEventListener('click', function() {
  controller.abort();
  console.log('Download aborted');
});

function fetchVideo() {
  ...
  fetch(url, {signal}).then(function(response) {
    ...
  }).catch(function(e) {
    reports.textContent = 'Download error: ' + e.message;
  })
}