Axios 二次封装

在前端开发中，axios 是一个非常流行的用于浏览器和 Node.js 的 HTTP 客户端，它支持 Promise API，使得异步请求变得更加简单和直观。然而，在实际项目中，直接使用原始的 axios 可能无法满足所有需求，比如统一处理错误、设置基础路径、添加请求头等。这时，我们就需要对 axios 进行二次封装，以提高代码的可维护性和复用性。以下是一个基于 TypeScript 的 axios 二次封装示例及其解析。

一、引入与创建实例

首先，从 axios 模块导入基础功能，并使用 create 方法创建一个新的 axios 实例。这样做的好处是可以针对这个实例单独配置基础路径、超时时间等，而不影响全局的 axios 设置。

import axios from "axios";

const request = axios.create({
  baseURL: import.meta.env.VITE_BASE_URL_API, // 动态获取环境变量中的基础URL
  timeout: 5000, // 设置请求超时时间为5秒
});

 这里使用了环境变量 VITE_BASE_URL_API 来动态配置基础URL，这是 Vite 构建工具推荐的做法，可以方便地根据不同环境（如开发、生产）切换API地址。

二、请求拦截器

请求拦截器主要用于在请求发送前做统一处理，例如自动添加认证信息到请求头、处理一些共通的数据格式化等。 

request.interceptors.request.use((config) => {
  // 从本地存储中获取token并添加到请求头
  config.headers.token = localStorage.getItem("token") || "";
  // 注意：如果使用Bearer Token认证，应使用Authorization字段
  // config.headers.Authorization = localStorage.getItem('token') || '';

  return config; // 返回修改后的配置
});

这段代码会在每次请求前执行，确保携带用户的认证信息（如JWT token），以便服务器端进行权限验证。

三、响应拦截器

响应拦截器用于处理服务器返回的数据，可以在这里统一处理错误信息、数据解构等。

request.interceptors.response.use(
  (response) => {
    // 直接返回响应体中的数据，简化使用
    return response.data;
  },
  (error) => {
    // 错误处理逻辑
    let errorMsg = "";
    if (error.response) {
      const status = error.response.status;
      switch (status) {
        case 401:
          errorMsg = "Token过期";
          break;
        case 403:
          errorMsg = "无权访问";
          break;
        case 404:
          errorMsg = "请求地址错误";
          break;
        case 500:
          errorMsg = "服务器错误";
          break;
        default:
          errorMsg = "网络连接错误";
          break;
      }
      ElMessage({ type: "error", message: errorMsg }); // 使用Element Plus的提示组件展示错误信息
    }
    return Promise.reject(error); // 重新抛出错误，以便外部可以继续捕获
  }
);

通过响应拦截器，我们能够优雅地处理各种HTTP状态码对应的错误情况，提供友好的错误提示给用户。

四、导出封装后的实例

最后，将封装好的 axios 实例导出，供项目其他部分使用。

export default request;

通过这样的二次封装，我们的HTTP请求变得更加集中和易于管理。每个请求都会自动应用基础配置、自动携带认证信息、统一处理错误，大大提升了开发效率和代码质量。