深入浅出 Axios 源码解析之请求拦截器

2023-12-29 12:15:11

前言

在上一篇文章中，我们分析了 Axios 发送一个简单 GET 请求的完整流程，如果您还没有阅读过，可以点击这里查看。

在这一篇文章中，我们将重点分析 Axios 是如何实现拦截器的，由于 Axios 的响应拦截器和请求拦截器非常相似，所以这里我们只分析请求拦截器。

Axios 拦截器概述

Axios 的拦截器是一个请求和/或响应处理函数，它可以用来检查和修改请求或响应数据。拦截器可以被用来实现许多不同的功能，比如：

Axios 拦截器使用中间件模式实现，它是一个设计模式，允许在不修改现有代码的情况下向对象或函数添加额外的功能。在 Axios 中，拦截器被实现为一个数组，每个元素都是一个中间件函数。

让我们先来看看 Axios 请求拦截器的实现代码：

interceptors: {
  request: new InterceptorManager()
}

可以看到，Axios 的请求拦截器是一个 InterceptorManager 实例，它是一个负责管理拦截器的对象。

InterceptorManager 内部维护了一个拦截器数组，当调用它的 use() 方法时，会将一个拦截器添加到数组中。当发送请求时，Axios 会遍历这个数组，并依次执行每个拦截器。

每个拦截器都是一个函数，它接受一个请求配置对象作为参数，并返回一个修改后的请求配置对象。如果拦截器没有返回任何东西，那么请求配置对象将保持不变。

如果拦截器返回一个 Promise 对象，那么 Axios 会等待 Promise 对象解析，然后使用解析后的值作为修改后的请求配置对象。

我们可以使用 axios.interceptors.request.use() 方法来自定义请求拦截器。这个方法接受两个参数：

例如，我们可以使用以下代码来创建一个简单的日志记录拦截器：

axios.interceptors.request.use((config) => {
  console.log('请求正在发送:', config);
  return config;
});

这个拦截器会记录发送的每个请求的配置对象。

除了 Axios 之外，其他流行的请求库也提供了类似的拦截器功能。这里我们来简单介绍一下其他请求库的拦截器实现方案：

Fetch API ：Fetch API 是一个原生 JavaScript API，它提供了简单的请求和响应处理功能。Fetch API 不提供内置的拦截器功能，但我们可以使用第三方库来实现拦截器，比如 fetch-intercept。
jQuery Ajax ：jQuery Ajax 是一个流行的 jQuery 插件，它提供了更高级的请求和响应处理功能。jQuery Ajax 内置了拦截器功能，我们可以使用 beforeSend 和 complete 选项来实现请求拦截器和响应拦截器。
SuperAgent ：SuperAgent 是一个功能强大的请求库，它提供了许多高级功能，包括拦截器功能。SuperAgent 的拦截器功能与 Axios 非常相似，我们可以使用 use() 方法来添加拦截器。