如何在同一个按钮上使用 AbortController 中止获取 HTTP 请求答案

【问题标题】：How to abort fetching HTTP request using AbortController on the same button如何在同一个按钮上使用 AbortController 中止获取 HTTP 请求
【发布时间】：2021-06-18 21:26:21
【问题描述】：

问题是我只需要通过单击“获取数据”按钮来获取最后一个 API 响应。应该取消之前的请求。

这个想法是使用 AbrotController。不幸的是，我遇到了一个问题，因为请求没有被取消并且控制台收到了消息：

获取 1 错误：无法在“窗口”上执行“获取”：用户中止一个请求。

示例代码如下：

<button id="test">Fetch data</button>

let isLoading = false;

let controller = new AbortController();
const abort = () => controller.abort();

const button = document.getElementById("test");

const fetchData = () => {
  controller = new AbortController();
  
  if (isLoading) {
    abort();
  }
  
  isLoading = true;
  
  return fetch('https://jsonplaceholder.typicode.com/todos', {
        signal: controller.signal
      })
      .catch(e => {
        console.warn(`Fetch 1 error: ${e.message}`);
      })
      .finally(() => isLoading = false);;
}

button.addEventListener('click', () => {
  fetchData();
});

【问题讨论】：

另一种方法是使用 RXjs 的 Observables，它可以很容易地只获取最后一个获取的值并丢弃以前的值（这是 Angular 中的标准），以及 debounce、distinctUntilChanged 和许多其他事物。此外，await fetch(...); 比 .then() 更易于编写、阅读和管理。

标签： javascript api http ecmascript-6 fetch-api

【解决方案1】：

这是因为您在与初始化信号不同的实例上调用了 controller.abort()。

这样的事情呢？

let isLoading = false;
let controller = new AbortController();

const abort = () => controller.abort();

const button = document.getElementById("test");

const fetchData = () => {
  if (isLoading) {
    abort();
    controller = new AbortController();
  }
  
  isLoading = true;
  
  return fetch('https://jsonplaceholder.typicode.com/todos', {
        signal: controller.signal
      })
      .catch(e => {
        console.warn(`Fetch 1 error: ${e.message}`);
      })
      .finally(() => isLoading = false);
}

button.addEventListener('click', () => {
  fetchData();
});

【讨论】：