JavaScript 中如何取消 get 请求

在JavaScript中取消GET请求可以通过几种方式实现：使用AbortController 和 Fetch API、使用XMLHttpRequest对象和onreadystatechange事件。AbortController 结合Fetch API是更现代的方案，为了取消请求，您首先创建一个AbortController实例，之后在其signal属性传给fetch调用。当你要取消请求时，调用AbortController实例的abort方法即可。

一、使用AbortController 和 Fetch API

AbortController 是一种较新的Web API，用于取消尚未完成的Web请求。与Fetch API搭配使用时，可以有效取消GET请求。以下是使用AbortController 取消Fetch请求的详细步骤：

初始化AbortController

首先创建一个AbortController实例，这将提供一个signal对象，用于后续与Fetch请求的关联。

const controller = new AbortController();

const { signal } = controller;

绑定Signal到Fetch请求

在Fetch请求中指定signal属性，将AbortController与请求绑定。若请求遇到abort事件，则会被取消。

fetch(url, { signal })

  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === 'AbortError') {
      // 处理请求被取消的情况
    } else {
      // 处理其他错误
    }
  });

取消请求

当需要取消请求时，调用AbortController实例的abort方法。之后Fetch请求会抛出一个异常，其name属性为'AbortError'。

controller.abort();

二、使用XMLHttpRequest对象和onreadystatechange事件

在XMLHttpRequest (XHR)的早期版本中，您可以通过更改readyState或调用abort方法来取消GET请求。以下是使用XHR取消GET请求的详细步骤：

初始化XMLHttpRequest对象

创建一个XMLHttpRequest实例。

const xhr = new XMLHttpRequest();

监听请求状态变化

监听onreadystatechange事件，以便在请求不再需要时取消它。

xhr.onreadystatechange = function () {

  if (this.readyState === 4 && this.status === 200) {
      // 请求成功
  }
};

发送GET请求

通过调用open和send方法发送请求。

xhr.open('GET', url, true);

xhr.send();

取消请求

如果需要取消请求，调用abort方法即可立即终止请求。

xhr.abort();

无论选择哪种方法，都能有效取消发送中的GET请求。通常情况下，利用AbortController取消Fetch请求是更现代和推荐的做法，因为它更简洁且是标准化的方法。但在一些旧的代码库或者需要支持不兼容Fetch API的旧浏览器的情况下，XMLHttpRequest依旧是一个可行的选择。

在实际应用中，例如在一个复杂的单页应用（SPA）中，取消请求是一个常用的需求。比如，在用户快速切换页面时，可能需要取消上一个页面上未完成的网络请求。这样不仅可以节约服务器资源，减少不必要的网络流量，同时也可以保证用户体验的流畅性和应用程序的性能。

相关问答FAQs：

问题1：如何在 JavaScript 中终止正在进行的 GET 请求？

回答：要取消正在进行的 GET 请求，可以使用 XMLHttpRequest 对象提供的 abort() 方法。首先，创建一个 XMLHttpRequest 对象，然后使用它发起 GET 请求。当你想要取消请求时，调用 abort() 方法即可。这将导致请求被立即终止，并触发 readystatechange 事件的 abort 状态。

问题2：我在 JavaScript 中想要终止正在进行的 GET 请求，应该注意什么？

回答：当你想要取消正在进行的 GET 请求时，有几点需要注意。首先，确保在调用 abort() 方法之前，要先检查请求是否已经成功发出。可以通过检查 XMLHttpRequest 对象的 readyState 属性值是否是 1 (代表已经 open 但尚未发送) 或 2 (代表已经发送但尚未接收响应)。其次，在调用 abort() 方法之后，需要通过检查 XMLHttpRequest 对象的 readyState 属性是否为 0 (代表请求已经终止) 来确认请求是否成功取消。

问题3：除了使用 XMLHttpRequest 对象的 abort() 方法，还有其他方法可以取消正在进行的 GET 请求吗？

回答：是的，除了使用 XMLHttpRequest 对象的 abort() 方法，还有其他方法可以取消正在进行的 GET 请求。一种常用的方法是将请求封装在一个 Promise 中，并使用 fetch() 函数来处理请求。通过返回一个尚未解决的 Promise 对象，并在需要取消请求时，使用 reject() 方法来拒绝 Promise，这样就可以实现取消 GET 请求的效果。另外，如果使用第三方库或框架，如 Axios 或 jQuery，它们通常提供了更简便的方法来取消正在进行的请求。如果你在项目中已经使用了这些库，可以查阅它们的文档来了解如何取消 GET 请求。