JavaScript 程序中如何取消 get 请求

取消在JavaScript程序中发起的GET请求是一个重要的功能，特别是在处理复杂的Web应用程序或增强用户体验时。实现取消的方法主要有 使用AbortController 、通过设置超时来取消请求。最常见和现代的方法是使用AbortController，这是一种官方推荐、标准化的方法，能够提供更细致的控制请求的能力。

使用AbortController 是目前最推荐的方法。它允许你在发起Fetch API请求时，关联一个信号对象，这个对象可以通知请求在何时被取消。使用方法简单明了，创建一个 AbortController 实例，并从中获取一个 signal，将这个 signal 作为fetch请求的一个参数。当你需要取消请求时，只需要调用 AbortController 实例的 abort 方法，这将会导致与之关联的fetch请求被取消，并抛出一个 AbortError 异常。

一、使用ABORTCONTROLLER

首先，创建一个 AbortController 实例，并在发起fetch请求时将其 signal 属性作为fetch请求的参数之一。这样，你便可以通过 AbortController 的实例控制请求的取消。

const controller = new AbortController();

const signal = controller.signal;
fetch(url, { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Fetch aborted');
    } else {
      console.error('An error occurred:', err);
    }
  });
// 取消请求
controller.abort();

这种方法清晰地展示了如何主动控制HTTP请求的生命周期。由于AbortController与Fetch API是原生集成的，所以它不仅简化了代码，也提高了代码的可读性和可维护性。

二、通过设置超时来取消请求

另外一种取消GET请求的方法是通过设置请求超时来实现。虽然这种方法不像使用 AbortController 那样直接，但在一些不支持 AbortController 或需求简单的情况下，可以作为一种替代方案。

你可以通过 setTimeout 函数设置一个计时器，当达到某个时间阈值时，主动调用 abort 方法取消请求。这种方法需要自己实现一个超时逻辑，将其与请求逻辑结合。

let didTimeOut = false;

const timeout = setTimeout(() => {
  didTimeOut = true;
  controller.abort(); // 使用AbortController取消请求
}, 1000); // 设置超时时间为1000毫秒
fetch(url, { signal: controller.signal })
  .then(response => response.json())
  .then(data => {
    clearTimeout(timeout);
    if (!didTimeOut) {
      console.log(data);
    }
  })
  .catch(err => {
    if (didTimeOut) {
      console.log('Fetch request timed out');
    } else {
      console.error('An error occurred:', err);
    }
  });

通过设置超时，你可以在请求超过指定时间未得到响应时自动取消，这对于提升应用的响应性和用户体验非常有效。

三、理解GET请求的特性

了解GET请求的特性对于正确地取消请求同样重要。GET请求通常用于从服务器获取数据，它们是幂等的，这意味着进行一次或多次请求对服务器的资源状态没有影响。虽然取消GET请求对服务器资源状态没有影响，但正确管理这些请求可以避免不必要的网络通信，节省带宽和资源。

四、总结

取消GET请求在开发现代Web应用时是一个重要且实用的功能。使用AbortController是最现代、最标准的取消请求的方法，它为开发者提供了直接、易用的API来控制请求的生命周期。备选的通过超时设置来取消请求方法也可以在特定情况下使用，但不如AbortController来得直接和有效。在实现这些功能时，理解GET请求的特性和使用场景也非常关键。适时地取消请求不仅能够提升用户体验，还能有效地利用网络和服务器资源。

相关问答FAQs：

如何取消 JavaScript 程序中的 HTTP GET 请求？

• 问题： JavaScript 程序中如何取消正在进行的 GET 请求？
• 回答： 可以使用 AbortController 对象和 fetch 方法的 signal 参数来取消 GET 请求。首先创建一个 AbortController 对象，然后将其信号传递给 fetch 方法的 signal 参数。如果需要取消请求，只需调用 AbortController 对象的 abort 方法即可。

如何在 JavaScript 中实现取消运行中的 GET 请求？

• 问题： 在 JavaScript 程序中，有没有一种方法可以取消正在运行的 GET 请求？
• 回答： 可以使用 XMLHttpRequest 对象来取消正在运行的 GET 请求。当发送 GET 请求时，将返回一个 XMLHttpRequest 对象，可将其存储在变量中。要取消请求，只需调用该对象的 abort 方法即可。

JavaScript 中如何中止已发起的 GET 请求？

• 问题： 在 JavaScript 程序中，是否有办法中止已经发起的 GET 请求？
• 回答： 可以使用 XMLHttpRequest 对象的 abort 方法来中止已经发起的 GET 请求。首先创建一个 XMLHttpRequest 对象，并使用其打开和发送方法发起 GET 请求。然后，如果需要中止请求，只需调用该对象的 abort 方法即可。