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 请求。

最后建议，企业在引入信息化系统初期，切记要合理有效地运用好工具，这样一来不仅可以让公司业务高效地运行，还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业，可以采用我们公司自研的企业级低代码平台：织信Informat。 织信平台基于数据模型优先的设计理念，提供大量标准化的组件，内置AI助手、组件设计器、自动化（图形化编程）、脚本、工作流引擎（BPMN2.0）、自定义API、表单设计器、权限、仪表盘等功能，能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景，全面助力企业落地国产化/信息化/数字化转型战略目标。 版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们微信：Informat_5 处理，核实后本网站将在24小时内删除。