告别阻塞：巧用JavaScript 中止异步请求

2023-09-18 09:42:14

在现代 JavaScript 开发中，异步请求已变得无处不在，它让我们能够执行耗时任务而不阻塞用户界面。然而，有时我们需要中止正在进行的异步请求，例如当用户取消操作或网络连接中断时。幸运的是，JavaScript 提供了一种简单有效的方法来实现这一目标。

了解 JavaScript 中的异步编程

异步编程是 JavaScript 中一种至关重要的技术，它允许我们执行长时间运行的任务而不会阻塞 UI。这对于创建交互性和响应性良好的 Web 应用程序至关重要。在 JavaScript 中，有几种不同的异步编程方法，包括：

回调函数： 传统的方法，需要在函数中传递一个回调函数，该函数将在异步操作完成时被调用。
Promise： 一种更现代化的方式，它返回一个 Promise 对象，该对象代表异步操作的最终结果。
Async/Await： ES2017 中引入的语法糖，它使异步编程更易于编写和理解。

中断异步请求

在 JavaScript 中中断异步请求有多种方法，具体取决于所使用的异步编程方法。

使用 Promise 中断请求

Promise 对象提供了一种名为 abort() 的方法，可以用来中止异步操作。此方法会将 Promise 的状态更改为 "rejected"，并且会触发 catch 块。以下是如何使用 Promise 中断异步请求：

fetch('https://example.com/api/data')
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 中断请求的代码
  })
  .abort();

使用 Fetch API 中断请求

Fetch API 还提供了一种方法来中断异步请求。与 Promise 不同，Fetch API 没有提供专门的中断方法。相反，我们可以使用 AbortController 对象来创建信号，并将其传递给 fetch() 函数。如果需要中断请求，我们可以调用 AbortController.abort() 方法。

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

fetch('https://example.com/api/data', { signal })
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 中断请求的代码
  });

controller.abort();

创建可中断的自定义方法

我们可以使用 Promise 和 AbortController 创建自己的可中断自定义方法。这可以让我们轻松地中断任何异步操作，无论它是使用 Promise 还是 Fetch API 发起的。

const abortSignal = new AbortController();

async function myAsyncMethod() {
  try {
    const response = await fetch('https://example.com/api/data', { signal: abortSignal.signal });
    // 处理响应
  } catch (error) {
    // 中断请求的代码
  }
}

myAsyncMethod();

abortSignal.abort();