【CV即用】使用Axios拦截器实现前端HTTP请求的统一处理

本文链接：https://blog.csdn.net/dskpay/article/details/134879777

在前后端分离的架构中，前端通常使用像Axios这样的HTTP客户端来与后端API进行通信。结合Spring Boot的统一响应体和全局异常处理，我们可以构建一套健壮的前后端交互模型。下面是一个Axios与Spring Boot配合使用的示例。

【CV即用】理解和使用Spring Boot中的异常处理和响应体增强

前端Axios请求拦截器示例

Axios 拦截器允许我们在发出请求或者接收响应之前进行操作。这里是一个通用的 Axios 拦截器示例，它可以应用于发送请求之前和接收到响应之后的场景。

import axios from 'axios';

// 创建一个 Axios 实例
const apiClient = axios.create({
  baseURL: 'http://api.yourdomain.com',
  timeout: 1000,
});

// 请求拦截器
apiClient.interceptors.request.use(
  config => {
    // 在这里添加例如token或者其他请求头信息
    const token = localStorage.getItem('userToken');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    // 进行一些操作后，记得返回 config
    return config;
  },
  error => {
    // 处理请求错误
    console.error('Request Error:', error);
    return Promise.reject(error);
  }
);

// 响应拦截器
apiClient.interceptors.response.use(
  response => {
    // 先判断响应状态码是否为200
    if (response.status === 200) {
      // 再判断业务状态码是否为后端定义的正常状态，这里假设是200
      if (response.data.code === 200) {
        // 直接返回数据部分
        return response.data.data;
      } else {
        // 如果业务状态码不正常，可以在这里抛出一个错误
        const error = new Error(response.data.message || 'Error');
        return Promise.reject(error);
      }
    } else {
      // 如果HTTP状态码不是200，也抛出错误
      return Promise.reject(new Error('请求响应错误'));
    }
  },
  error => {
    // 对响应错误做点什么
    if (error.response) {
      // 服务器至少返回了一个响应，可以使用 http 状态码判断错误类型
      console.error('Response Error Status:', error.response.status);
      console.error('Response Error Data:', error.response.data);
      // 还可以根据HTTP状态码，抛出不同的错误信息或进行不同的错误处理
    } else if (error.request) {
      // 请求已经发出去，但是没有收到响应，比如超时
      console.error('No response received:', error.request);
    } else {
      // 在设置请求时发生了一些事情，触发了一个错误
      console.error('Error:', error.message);
    }
    
    // 如果有额外的错误信息，也可以包含在内
    console.error('Error Config:', error.config);
    
    return Promise.reject(error);
  }
);

// 使用拦截器的 API Client 发送GET请求示例
apiClient.get('/test/get')
  .then(data => {
    // 由于响应拦截器直接返回`response.data.data`, 因此这里的`data`就是我们想要的数据
    console.log('获取成功:', data);
  })
  .catch(error => {
    // 请求失败或响应数据不符合预期时的错误处理
    console.error('获取失败:', error);
  });

在这个示例中，请求拦截器用于添加如身份验证令牌等共通请求头。响应拦截器用于提前处理状态码以及筛选返回的数据，通过判断状态码和业务代码来区分是否抛出错误。

使用拦截器可以简化请求/响应逻辑，实现前端请求预处理和错误统一处理的逻辑解耦，同时提供了一种简洁的方法来确保所有请求都具有必要的认证信息，而所有的响应都会按照预期进行处理。

综合前后端异常处理流程

用户通过前端界面触发一个请求，前端使用Axios发送API请求到后端。
后端接收到请求，并执行对应的业务逻辑。
如果在业务逻辑中一切正常，后端将正常的数据响应包裹在ApiResponse对象中，并将其作为JSON格式返回给前端。
如果业务逻辑执行中发生错误，如遇到未捕获的异常或明确抛出的CustomException，后端的GlobalExceptionHandler将捕获异常，并将异常信息包裹在ApiResponse对象中返回，同时设置相应的HTTP状态码。
前端的Axios接收到响应后，根据状态码或响应体中的code判断是成功响应还是错误响应，并据此进行下一步的处理。