如何在同一個按鈕上使用 AbortController 中止獲取 HTTP 請求

Question

問題是我只需要通過單擊“獲取數據”按鈕來獲得最后一個 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();
});

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