如何在 JavaScript 中取消正在進行的「fetch()」請求？

取消正在運行的HTTP fetch() 請求

用於從JavaScript 發出請求的fetch() API 的出現引發了有關其取消機制的問題- 航班請求。從歷史上看，沒有內建選項。然而，最近的更新引入了取消請求的途徑。

使用 AbortController

2017 年 9 月 20 日生效，fetch() 現在支援訊號參數，可以透過與 AbortController 組合。以下步驟概述了該過程：

1. 創建AbortController 對象：

   • const controller = new AbortController()

2. 取得AbortController 的訊號：

   • const signal =controller.signal

3. 將訊號傳遞給fetch():

   • 將訊號傳遞給fetch():
   fetch(urlToFetch, { method: 'get', signal: signal })

4. 必要時中止請求：
必要時中止請求：

>controller.abort()

// Create an AbortController instance.
const controller = new AbortController();
const signal = controller.signal;

function beginFetching() {
  console.log('Now fetching');
  fetch("https://httpbin.org/delay/3", {
    method: 'get',
    signal: signal,
  })
  .then(function(response) {
    console.log(`Fetch complete. (Not aborted)`);
  })
  .catch(function(err) {
    console.error(` Err: ${err}`);
  });
}

function abortFetching() {
  console.log('Now aborting');
  // Abort the request.
  controller.abort();
}

範例用法考慮以下範例（與Firefox 57 相容）：在此在範例中，按一下「開始」按鈕將發起請求，而「中止」按鈕將在完成之前終止請求。

以上是如何在 JavaScript 中取消正在進行的「fetch()」請求？的詳細內容。更多資訊請關注PHP中文網其他相關文章！