Axios中间件实现原理

使用 Axios 发送 HTTP 请求时，可以使用拦截器（interceptors）来创建中间件，以便在请求和响应过程中注入自定义逻辑。下面是一个更详细的 Axios 中间件实现的说明，包括拦截器的工作原理以及一个具体的案例。

Axios 拦截器工作原理：

1. 请求拦截器：在请求发送前执行的操作。

   • 当发送请求时，Axios 会首先触发请求拦截器。
   • 请求拦截器接收一个配置对象作为参数，你可以在这里修改请求的配置，例如添加请求头、处理参数等。
   • 如果在请求拦截器中返回配置对象，请求将继续发送。
   • 如果在请求拦截器中返回一个错误（使用 Promise.reject），请求将被终止。

2. 请求发送：请求会根据配置发送到服务器。

3. 响应拦截器：在响应返回后执行的操作。

   • 当服务器响应后，Axios 会触发响应拦截器。
   • 响应拦截器接收响应对象，你可以在这里处理响应数据、错误等。
   • 如果在响应拦截器中返回响应对象，响应将传递给请求的 .then() 处理函数。
   • 如果在响应拦截器中返回一个错误（使用 Promise.reject），错误将被传递给请求的 .catch() 处理函数。

具体的 Axios 中间件示例：

假设创建一个中间件，它在每次请求发送前添加一个自定义请求头，以及在响应中处理特定状态码的错误。以下是一个更详细的示例：

import axios from 'axios';

const axiosMiddleware = axios.create();

// 请求拦截器
axiosMiddleware.interceptors.request.use(
  (config) => {
    // 在请求发送前添加自定义请求头
    config.headers['X-Custom-Header'] = 'Custom Value';
    return config;
  },
  (error) => {
    // 请求拦截器中的错误处理
    return Promise.reject(error);
  }
);

// 响应拦截器
axiosMiddleware.interceptors.response.use(
  (response) => {
    // 在响应中处理成功状态码
    if (response.status === 200) {
      console.log('Request was successful.');
    }
    return response;
  },
  (error) => {
    // 在响应拦截器中处理特定状态码的错误
    if (error.response.status === 404) {
      console.error('Resource not found.');
    }
    return Promise.reject(error);
  }
);

export default axiosMiddleware;

在这个示例中，请求拦截器用于添加自定义请求头，响应拦截器用于处理成功状态码和特定状态码的错误。你可以使用 axiosMiddleware 实例来发送请求，这些拦截器将自动应用到每个请求。

import axiosMiddleware from './axiosMiddleware';

axiosMiddleware.get('https://api.example.com/data')
  .then((response) => {
    // 处理成功的响应
    console.log(response.data);
  })
  .catch((error) => {
    // 处理请求错误
    console.error(error);
  });