Axios源码解析：拦截请求和响应的艺术

前端

2023-12-12 08:39:55

作为一名技术博客创作专家，我将从独特的视角带你领略Axios源码的魅力。我们将共同探寻拦截请求和响应的实现，感受代码背后的设计精髓。

前端请求的痛点

前端向后端发送请求时，经常会遇到一些重复性的配置和处理工作。例如，需要在每个请求中都加入相同的请求头、处理相同的响应数据格式等等。这些重复的工作不仅使代码变得冗长难维护，还会降低开发效率。

Axios拦截器的登场

为了解决上述痛点，Axios提供了拦截器（Interceptor）机制。拦截器允许我们在HTTP请求和响应的生命周期中插入自定义逻辑，从而简化和统一处理重复性的任务。

请求拦截器

请求拦截器允许我们在发送请求之前对其进行修改或取消。我们可以通过axios.interceptors.request.use()方法来注册请求拦截器。

axios.interceptors.request.use((config) => {
  // 在发送请求之前做一些事情
  return config;
}, (error) => {
  // 请求错误时做一些事情
  return Promise.reject(error);
});

响应拦截器

响应拦截器允许我们在收到响应后对其进行修改或取消。我们可以通过axios.interceptors.response.use()方法来注册响应拦截器。

axios.interceptors.response.use((response) => {
  // 在收到响应后做一些事情
  return response;
}, (error) => {
  // 响应错误时做一些事情
  return Promise.reject(error);
});

Axios源码剖析

Axios的拦截器功能是如何实现的呢？让我们一起来看看源码。

请求拦截器源码

axios.interceptors.request.use((config) => {
  // 在发送请求之前做一些事情
  return config;
}, (error) => {
  // 请求错误时做一些事情
  return Promise.reject(error);
});

在这段代码中，axios.interceptors.request是一个数组，它存储了所有已注册的请求拦截器。use()方法接收两个参数：一个处理请求配置的函数和一个处理请求错误的函数。

当我们发送一个HTTP请求时，Axios会依次调用所有注册的请求拦截器。每个拦截器都可以修改请求配置或取消请求。如果某个拦截器取消了请求，则不会再调用后续的拦截器。

响应拦截器源码

axios.interceptors.response.use((response) => {
  // 在收到响应后做一些事情
  return response;
}, (error) => {
  // 响应错误时做一些事情
  return Promise.reject(error);
});

这段代码与请求拦截器非常相似，不同之处在于axios.interceptors.response数组存储的是所有已注册的响应拦截器。

当我们收到一个HTTP响应时，Axios会依次调用所有注册的响应拦截器。每个拦截器都可以修改响应数据或取消响应。如果某个拦截器取消了响应，则不会再调用后续的拦截器。