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

Question

问题是我只需要通过单击“获取数据”按钮获得最后的 API 响应。应取消较早的请求。

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

Fetch 1 error: Failed to execute 'fetch' on 'Window': The user aborted a request.

示例代码如下：

<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();
});

Answer 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();
});

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

How to abort fetching HTTP request using AbortController on the same button

javascript

api

http

ecmascript-6

fetch-api