JavaScript 中如何取消请求

在前端开发中，我们经常会向后台发送请求来获取数据。但是有时候，我们需要在请求还未完成时取消它。本文将介绍如何在 JavaScript 中取消请求，并提供代码示例。

XMLHttpRequest

XMLHttpRequest 是 JavaScript 中发送 HTTP 请求的原生接口。要取消一个 XMLHttpRequest 请求，我们需要使用它的 abort() 方法。下面是一个简单的示例：

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');
xhr.send();

// 5 秒后取消请求
setTimeout(() => {
  xhr.abort();
}, 5000);

在这个示例中，我们使用了 XMLHttpRequest 发送了一个 GET 请求到 /api/data。然后，我们设置了一个 5 秒的定时器，在定时器回调函数中调用了 xhr.abort() 方法，来取消请求。

Fetch

Fetch 是 ES6 中提供的新的网络请求 API。它通过 Promise 实现异步操作，使用起来比 XMLHttpRequest 更加简单和方便。要取消一个 Fetch 请求，我们需要使用 AbortController。下面是一个示例：

const controller = new AbortController();
const signal = controller.signal;

fetch('/api/data', { signal })
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('请求已取消');
    } else {
      console.error('请求发生错误：', error);
    }
  });

// 5 秒后取消请求
setTimeout(() => {
  controller.abort();
}, 5000);

在这个示例中，我们创建了一个 AbortController，然后使用它的 signal 属性作为 fetch() 方法的第二个参数，来创建一个带有中止信号的请求。在请求完成或被取消时，fetch() 方法返回一个 Promise，我们可以通过捕获 AbortError 来判断请求是否被取消。

结论

在 JavaScript 中，我们可以通过 XMLHttpRequest 和 Fetch 来发送网络请求，并使用它们的 abort() 方法和 AbortController 来取消请求。当我们需要取消请求时，这些方法和接口可以帮助我们快速和方便地实现这个功能。

除了上述提到的方法，还有一些其他的方法可以取消请求。例如，使用第三方库 axios 时，可以调用它提供的 cancel() 方法来取消请求。另外，一些前端框架也提供了对取消请求的支持，例如 Vue.js 中的 $cancelable() 方法。无论使用哪种方法，及时取消请求可以避免不必要的网络流量和资源浪费，提高应用程序的性能和用户体验。