如何在 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(urlToFetch, { method: 'get', signal: signal })

4. 必要时中止请求：

   • controller.abort()

示例用法

考虑以下示例（与 Firefox 57 兼容）：

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

在此示例中，单击“开始”按钮将发起请求，而“中止”按钮将在完成之前终止请求。

以上是如何在 JavaScript 中取消正在进行的'fetch()”请求？的详细内容。更多信息请关注PHP中文网其他相关文章！