Axios拦截器的作用及使用方法

# 1. 简介

## 1.1 什么是Axios拦截器
Axios拦截器是指在使用Axios发送请求或接收响应时，能够在请求或响应被 then 或 catch 处理之前拦截它们的过程。在拦截器中，可以对请求的参数、请求头、响应数据等进行修改或处理，并且可以统一处理请求或响应的错误信息。

## 1.2 拦截器的作用
拦截器的作用在于全局统一处理请求和响应，可以方便地对请求进行预处理或对响应进行统一处理，而不必在每个请求或响应处分别处理相同的逻辑。

## 1.3 为什么要使用Axios拦截器
使用Axios拦截器能够提高代码的复用性和可维护性，避免在各个请求处重复编写相同的逻辑，同时也能够对请求和响应进行统一的管理和处理，提高开发效率。因此，Axios拦截器在实际项目中被广泛应用。

# 2. 拦截器的使用方法

拦截器是用来拦截请求或响应的一种机制，通过拦截器可以在发送请求或接收响应时对数据进行处理。在Axios中使用拦截器可以对请求或响应进行全局性的处理，例如在请求之前添加统一的请求头，或者在接收到响应后统一处理错误信息。接下来我们将详细介绍Axios拦截器的使用方法。

#### 2.1 安装及引入Axios

如果你还没有安装Axios，可以通过以下命令使用npm安装：

npm install axios

安装完成后，你可以在项目中引入Axios：

const axios = require('axios');

#### 2.2 创建拦截器实例

在使用Axios拦截器之前，需要先创建一个Axios实例，可以通过`axios.create()`方法来创建一个实例：

const instance = axios.create();

#### 2.3 添加拦截器

创建实例后，可以通过实例的`interceptors`属性来添加拦截器。Axios提供了`request`和`response`两种类型的拦截器，分别用于请求和响应的处理。

#### 2.4 拦截器的执行顺序

添加的拦截器会按照添加的顺序依次执行，先添加的拦截器后执行，后添加的拦截器先执行。请求拦截器会在发送请求前执行，而响应拦截器会在接收到响应后执行。

# 3. 请求拦截器

请求拦截器是在发送请求前对请求进行处理的拦截器。它允许我们在请求被发送出去之前做一些事情，比如修改请求参数、添加请求头等。

#### 3.1 请求拦截器的作用

请求拦截器的作用是在请求被发送出去之前对请求进行处理，可以用来全局处理请求，比如统一添加认证信息、统一处理请求参数等。

#### 3.2 修改请求参数

可以在请求拦截器中修改请求的参数，例如添加时间戳、修改请求格式等。

import axios

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

# 添加请求拦截器
axios_instance.interceptors.request.use(
    function (config) {
        // 在发送请求之前做些什么
        config.params.timestamp = Date.now();
        return config;
    },
    function (error) {
        // 对请求错误做些什么
        return Promise.reject(error);
    }
);

#### 3.3 添加请求头

在请求拦截器中可以统一添加一些请求头信息，比如认证信息、用户信息等。

import axios

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

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

#### 3.4 请求拦截器的示例

下面是一个使用请求拦截器的示例，演示了如何在发送请求前添加统一的认证信息：

import axios

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

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

# 发送请求
axios_instance.get('https://api.example.com/data')

在上述示例中，我们通过请求拦截器统一在发送请求前添加了认证信息，这样每个请求都会自动带上认证信息。

通过以上示例，我们可以看到请求拦截器在Axios中的使用方法和作用，帮助我们在发送请求前对请求进行统一处理。

# 4. 响应拦截器

响应拦截器是在发送请求后，接收到服务器响应之前执行的拦截器。它主要用于对服务器返回的数据进行处理和统一错误处理。以下是关于响应拦截器的一些内容：

### 4.1 响应拦截器的作用

响应拦截器的作用是在接收到服务器响应后对数据进行处理。它可以用来修改响应数据、处理错误信息以及进行一些通用的操作，如统一的数据格式转换、数据加工等。

### 4.2 修改响应数据

在响应拦截器中，我们可以对服务器返回的数据进行修改。比如，可以对返回的数据进行格式转换、数据加工等操作。

axios.interceptors.response.use(
  response => {
    // 对返回的数据进行修改
    response.data = response.data.map(item => item.name);
    return response;
  },
  error => {
    return Promise.reject(error);
  }
);

### 4.3 处理响应错误

在响应拦截器中，我们可以通过判断服务器返回的状态码来进行错误处理。可以根据不同的状态码进行不同的处理逻辑，如跳转到登录页、重新发送请求等。

axios.interceptors.response.use(
  response => {
    // 处理成功响应
    return response;
  },
  error => {
    // 处理错误响应
    if (error.response.status === 401) {
      // 跳转到登录页
      window.location.href = '/login';
    } else if (error.response.status === 403) {
      // 重新发送请求
      return axios.request(error.config);
    }
    return Promise.reject(error);
  }
);

### 4.4 响应拦截器的示例

下面是一个使用响应拦截器的示例，用于统一处理接口返回的错误信息：

axios.interceptors.response.use(
  response => {
    // 处理成功响应
    return response;
  },
  error => {
    // 处理错误响应
    if (error.response.status === 404) {
      // 显示404错误提示
      showToast('请求的资源不存在');
    } else if (error.response.status === 500) {
      // 显示500错误提示
      showToast('服务器内部错误');
    } else {
      // 显示其他错误提示
      showToast('请求失败，请稍后重试');
    }
    return Promise.reject(error);
  }
);

在以上示例中，通过判断错误响应的状态码，我们可以针对不同的错误类型进行统一的错误提示，

这是一个响应拦截器的基本示例，你可以根据实际需求来修改和完善拦截器的功能。拦截器的具体使用方法请参考官方文档。

# 5. 拦截器的应用场景

拦截器在实际开发中有许多应用场景，下面我们将介绍几种常见的应用场景。

#### 5.1 授权验证

通过请求拦截器，在发送请求前可以添加身份验证信息，例如添加 token 到请求头部，进行用户身份的验证。这样可以统一在拦截器中进行授权验证，而不用在每个请求的处理中都添加身份验证的逻辑，提高了代码的复用性和可维护性。

#### 5.2 统一错误处理

通过响应拦截器，我们可以统一处理错误响应，例如对特定的错误状态码进行统一的处理，或者格式化错误信息并显示给用户。这样可以避免在每个请求的处理中都添加相同的错误处理逻辑，提高了代码质量和可读性。

#### 5.3 超时处理

在请求拦截器中可以设置超时时间，如果请求超过预设的时间仍未返回结果，可以统一处理超时情况，例如显示错误提示或者重新发起请求。这样可以提升用户体验，避免长时间的等待。

#### 5.4 数据加载提示

使用请求拦截器可以在发送请求时显示加载提示，等到请求返回后再隐藏。这样可以让用户清楚地知道当前的操作状态，提升用户交互体验。

以上是拦截器的一些常见应用场景，通过灵活运用拦截器，可以简化代码逻辑，提升开发效率。

# 6. 总结
拦截器是Axios提供的一种强大的工具，用于在请求发送和响应返回之前进行操作。通过拦截器，我们可以修改请求参数、添加请求头、处理响应数据等。在实际应用中，拦截器可以帮助我们实现授权验证、统一错误处理、超时处理、数据加载提示等功能。

### 6.1 拦截器的优势
使用拦截器可以减少重复的代码，提高代码的复用性和可维护性。拦截器将一组相关的操作封装在一起，使得代码结构更加清晰，易于理解和管理。另外，拦截器还能够提供一种统一的处理方式，让我们能够在请求和响应中进行一些通用的操作，如添加公共的请求头、处理错误信息等。

### 6.2 注意事项
在使用拦截器时，我们需要注意以下几点：
- 在创建拦截器实例时，需要注意顺序，后添加的拦截器会先执行。
- 拦截器可以在全局配置中使用，也可以在单个请求中使用，根据实际场景选择合适的方式。
- 拦截器中的每个操作都是可选的，可以根据需要选择添加或者省略。
- 使用拦截器时需要特别注意对请求和响应数据的处理，以避免出现意料之外的结果。

### 6.3 使用Axios拦截器的建议
在实际开发中，我们建议根据项目的需求合理使用拦截器。对于一些通用的操作，可以在全局配置中使用拦截器；对于一些特定的请求，可以在单个请求中使用拦截器。同时，在使用拦截器时，要充分考虑异常情况，并进行适当的处理，以避免对用户产生不好的体验。

总之，Axios拦截器是一个非常实用的功能，可以帮助我们简化代码、统一处理请求和响应，提升开发效率和用户体验。掌握了拦截器的使用方法和应用场景，我们可以更加灵活地进行接口请求和数据处理。希望本文对你理解和使用拦截器有所帮助。