手把手教你写一个带取消功能的 delay 函数，揭秘 axios 取消功能原理

2024-02-05 11:10:01

前言

在 JavaScript 中，setTimeout() 函数是实现延迟执行代码的常用方法。然而，setTimeout() 函数并不具备取消功能，一旦调用了 setTimeout() 函数，即使后续不需要执行延迟代码了，也无法取消。这在某些情况下可能会造成问题，例如当用户在发出请求后又改变了主意，或者当页面即将关闭时。

为了解决这个问题，我们需要实现一个带取消功能的延迟函数。这样，我们就可以在需要的时候取消延迟代码的执行。

实现带取消功能的 delay 函数

实现一个带取消功能的 delay 函数并不难，我们可以使用 AbortController 对象来做到这一点。AbortController 对象提供了一个 abort() 方法，可以用来取消一个正在执行的请求或任务。

下面是带取消功能的 delay 函数的实现：

function delay(ms, controller) {
  return new Promise((resolve, reject) => {
    const timeoutId = setTimeout(() => {
      resolve();
    }, ms);

    controller.signal.addEventListener('abort', () => {
      clearTimeout(timeoutId);
      reject();
    });
  });
}

这个函数接受两个参数：ms 表示延迟的时间，单位是毫秒；controller 是一个 AbortController 对象。

当调用这个函数时，它会返回一个 Promise 对象。这个 Promise 对象将在延迟时间后解析，或者当 controller 对象的 abort() 方法被调用时拒绝。

axios 取消功能原理

axios 是一个非常流行的 JavaScript 库，用于发送 HTTP 请求。axios 也提供了取消功能，可以用来取消正在执行的请求。

axios 的取消功能是通过 AbortController 对象实现的。当我们创建一个 axios 请求时，我们可以传入一个 AbortController 对象。如果我们在请求发出后改变了主意，或者页面即将关闭，我们可以调用 AbortController 对象的 abort() 方法来取消请求。

axios 会在收到 abort() 方法的调用后，自动取消请求。