取消Fetch请求与事件监听器之AbortController详解

2023-11-20 04:50:02

我们经常需要发送Ajax请求从服务器端获取数据或进行数据更新操作，Fetch API 凭借其简单易用的接口，成为众多开发人员的首选。然而，在某些场景下，可能需要在请求发出后取消它。本文将介绍如何使用 AbortController 来取消 Fetch 请求以及相关事件的监听器。

AbortController原理

AbortController是一个用于管理和取消 Fetch 请求的对象。它提供了两个主要方法：abort() 和 signal。abort() 方法用于取消与 AbortController 关联的所有请求。signal 属性则返回一个 AbortSignal 对象，其中包含了一个 boolean 值 aborted。当 AbortController 调用 abort() 方法时，aborted 值将被设置为 true，所有关联的请求都会被取消。

AbortController使用方法

要使用 AbortController，首先需要创建一个 AbortController 对象。然后，可以使用 AbortController 的 signal 属性获取一个 AbortSignal 对象。这个 AbortSignal 对象可以被传递给 Fetch 请求的 options 对象。当 Fetch 请求被取消时，AbortSignal 对象的 aborted 属性值将被设置为 true。

下面是一个使用 AbortController 取消 Fetch 请求的示例：

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

fetch('https://example.com/api/data', {
  signal
})
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });

// 取消请求
controller.abort();

在上面的示例中，我们首先创建了一个 AbortController 对象并获取了它的 AbortSignal 对象。然后，我们将 AbortSignal 对象传递给 Fetch 请求的 options 对象。当 Fetch 请求被取消时，AbortSignal 对象的 aborted 属性值将被设置为 true，并且 Fetch 请求将被中止。

AbortController取消事件监听器

AbortController 还可以用于取消事件监听器。要做到这一点，我们需要将 AbortSignal 对象传递给 addEventListener() 方法的第三个参数。当 AbortSignal 对象的 aborted 属性值被设置为 true 时，事件监听器将被取消。

下面是一个使用 AbortController 取消事件监听器的示例：

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

addEventListener('click', (event) => {
  // 做一些事情
}, {
  signal
});

// 取消事件监听器
controller.abort();

在上面的示例中，我们首先创建了一个 AbortController 对象并获取了它的 AbortSignal 对象。然后，我们将 AbortSignal 对象传递给 addEventListener() 方法的第三个参数。当 AbortSignal 对象的 aborted 属性值被设置为 true 时，事件监听器将被取消。