Axios请求拦截与响应拦截的异同

# 1. 简介

## 1.1 什么是Axios

Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js平台。它的主要特点包括：在浏览器中发起XMLHttpRequests请求，在Node.js中发起http请求；支持Promise API；拦截请求和响应；转换请求和响应数据；取消请求等。

Axios的设计目标是提供一个简洁、易于使用的接口，同时还能够支持强大的拦截和转换请求和响应数据的功能。它可以用于从服务器获取数据，或者向服务器发送数据，并且可以处理不同类型的数据格式，如JSON、XML、文件等。

Axios是目前使用最广泛的HTTP客户端库之一，它的简洁易用性以及丰富的功能使得它成为开发者首选的HTTP请求库。

## 1.2 请求拦截与响应拦截的作用

在介绍Axios的请求拦截与响应拦截之前，我们先了解一下拦截器的概念。拦截器是一种机制，可以在请求或响应被处理之前拦截它们，并进行相应的处理。

Axios提供了请求拦截器和响应拦截器，它们的作用如下：

- 请求拦截器：在发送请求之前对请求进行拦截和处理，例如添加公共请求头、请求参数的处理等。
- 响应拦截器：在接收到响应数据之后对响应进行拦截和处理，例如对响应数据的统一处理、错误处理等。

使用请求拦截器和响应拦截器可以方便地对请求和响应进行统一处理，减少重复的代码，并提高代码的可维护性和可复用性。

在接下来的章节中，我们将分别介绍Axios的请求拦截和响应拦截的具体用法，并给出相应的示例代码。

# 2. Axios请求拦截

Axios的请求拦截器允许我们在发送请求前对其进行修改或者添加一些自定义逻辑。请求拦截器通常用于添加一些通用的请求头信息、对请求参数进行处理等操作。在本章中，我们将详细介绍请求拦截器的作用及使用场景，以及如何配置和使用请求拦截器。

**2.1 请求拦截器的作用及使用场景**

在实际开发中，我们经常需要对发出的请求进行统一的处理，比如在每个请求中添加一些固定的 token、进行请求参数的格式化等。这时可以通过请求拦截器来实现这些功能，保持代码的整洁和可维护性。

使用场景包括但不限于：
- 在每个请求中添加认证信息
- 统一处理请求参数（比如统一加密或者格式化）
- 在请求之前显示loading动画

**2.2 如何配置请求拦截器**

要配置请求拦截器，我们需要在发出请求前对请求的配置进行修改。Axios提供了`axios.interceptors.request.use()`方法来添加请求拦截器。该方法接受两个参数，第一个是成功时执行的回调函数，第二个是失败时执行的回调函数。在成功的回调函数中，我们可以对请求配置进行修改，也可以返回一个配置对象，或者一个 Promise 对象。

**2.3 请求拦截器示例**

下面是一个使用Axios请求拦截器的示例：

import axios

# 创建实例
instance = axios.create()

# 添加请求拦截器
instance.interceptors.request.use(
  config => {
    // 在请求发送之前做些什么
    config.headers.Authorization = 'Bearer token';
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

在这个示例中，我们使用`axios.create()`方法创建了一个 Axios 实例，并通过`interceptors.request.use()`方法添加了一个请求拦截器。当这个 Axios 实例发出请求时，请求拦截器会自动拦截并执行我们定义的逻辑，比如添加了一个固定的认证信息到请求头中。

通过以上示例，我们可以看到如何在Axios中实现请求拦截器的功能。

接下来我们将继续探讨Axios的响应拦截器。

# 3. Axios响应拦截

响应拦截器是在接收到响应后，对响应数据进行处理或者过滤的一种机制。在Axios中，我们可以通过响应拦截器来统一处理后端返回的数据，也可以在此处进行错误处理、权限校验等操作。

#### 3.1 响应拦截器的作用及使用场景

响应拦截器的主要作用是统一处理后端返回的数据，例如对数据进行统一的格式化、错误处理、权限校验等。使用场景包括但不限于：
- 统一处理后端返回的数据格式，如将后端返回的错误信息统一展示给用户
- 在接收到响应后进行权限校验，如判断用户是否有权限访问该接口
- 在接收到响应后进行错误处理，如处理后端返回的异常信息

#### 3.2 如何配置响应拦截器

在Axios中，我们可以通过`axios.interceptors.response.use()`方法来配置响应拦截器。这个方法接受两个参数，第一个参数用于处理成功的响应，第二个参数用于处理失败的响应。

// 配置响应拦截器
axios.interceptors.response.use(
  response => {
    // 在这里对后端返回的数据进行处理
    return response;
  },
  error => {
    // 在这里对错误进行处理
    return Pro