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

Question

The problem is that I need to get only last API response by clicking a "Fetch Data" button. Earlier requests should be canceled.

The idea is to use AbrotController. Unfortunately, I have a problem, because the requests are not canceled and a console receives the message:

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

Sample code below:

<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

It is because you call the controller.abort() on different instance than you initialized signal.

What about something like this?

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