返回

从源码的角度揭秘 Axios 的请求取消机制

前端

从源码的角度看Axios是如何取消请求的

在前端开发中，取消请求是一个常见且实用的功能。例如，当用户在页面跳转前需要取消未完成的请求时，取消请求就显得尤为必要。本文将深入探讨 Axios HTTP 库是如何实现请求取消的，带你从源码层面理解其工作原理。

Axios 的请求取消机制

Axios 的请求取消机制依赖于内置的 cancelToken 模块，该模块提供了创建和使用取消令牌的方法。当我们创建 AxiosInstance 时，可以传入 cancelToken 作为参数，以便在请求过程中使用该令牌进行取消。

取消令牌包含一个 promise，该 promise 在请求被取消时会触发 reject。在发送请求之前，Axios 会为每个请求创建一个 CancelToken 实例，并将其传递给底层 XMLHttpRequest 对象。如果请求被取消，XMLHttpRequest 对象会收到一个 abort 信号，从而中断请求。

源码解析

让我们深入分析 Axios 取消请求的源码实现：

  1. 创建 CancelToken 实例：
export function createCancelToken(executor: CancelExecutor) {
  const cancelToken: CancelToken & Cancel {
    promise: Promise<Cancel>;
    reason?: Cancel;
    throwIfRequested(): void;
    source: CancelTokenSource;
  } = {
    promise: new Promise<Cancel>(executor),
    reason: undefined,
    throwIfRequested: function throwIfRequested() {
      if (cancelToken.reason) {
        throw cancelToken.reason;
      }
    },
    source: cancelToken,
  };
  return cancelToken;
}

这个函数创建一个新的 CancelToken 实例，并传入一个执行器函数。执行器函数负责设置 CancelToken 的 promise，当请求被取消时，该 promise 会触发 reject。

  1. 发送请求：
    当我们使用 Axios 发送请求时，可以将 cancelToken 传递给 axios 函数：
axios({
  method: 'get',
  url: 'https://example.com',
  cancelToken: cancelToken,
});

这样，Axios 会将 cancelToken 传递给底层 XMLHttpRequest 对象。

  1. 取消请求：
    要取消请求，我们需要调用 cancelToken 的 cancel 方法：
cancelToken.cancel('Operation canceled by the user.');

这会触发 CancelToken promise 的 reject，并将取消原因作为参数传递。

  1. 处理取消：
    当 XMLHttpRequest 对象收到 abort 信号时，它会停止请求并触发错误事件。Axios 会捕获此错误事件，并将其作为 cancelToken promise 的 reject 原因传递。

实际应用

在实际应用中，我们可以通过以下步骤来取消请求：

  1. 创建一个 CancelToken 实例。
  2. 将 CancelToken 传递给 Axios 请求。
  3. 在需要取消请求时，调用 cancelToken 的 cancel 方法。

总结

本文深入分析了 Axios 请求取消机制的源码实现，解释了 CancelToken 模块如何创建和使用取消令牌来实现请求取消。理解这些底层机制对于在前端开发中有效管理 HTTP 请求至关重要。