Axios 封装最佳实践：统一错误处理与请求拦截器配置

在现代前端开发中，Axios 是一个广泛使用的 HTTP 客户端，支持浏览器和 Node.js 环境。通过封装 Axios，可以实现统一的错误处理和请求拦截器配置，从而提升代码的可维护性和用户体验。以下是 Axios 封装的最佳实践。

---

一、Axios 封装的基本思路

封装 Axios 的核心是通过 axios.create() 创建一个自定义实例，并在该实例上配置请求拦截器和响应拦截器。这种方式可以让我们在发送请求之前对请求头进行统一配置，同时在响应时对数据进行统一处理。

1. 创建 Axios 实例

import axios from "axios";

const axiosInstance = axios.create({
  baseURL: "https://api.example.com", // 设置请求基础路径
  timeout: 5000, // 设置超时时间
  headers: { "Content-Type": "application/json" } // 设置默认请求头
});

---

二、请求拦截器配置

请求拦截器可以在请求发送之前对请求配置进行修改，例如添加认证令牌、修改请求头等。

示例：添加认证令牌

axiosInstance.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem("authToken");
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

---

三、响应拦截器配置

响应拦截器可以在响应数据返回之前对数据进行处理，或者对错误进行统一处理。

示例：统一处理响应数据和错误

axiosInstance.interceptors.response.use(
  (response) => {
    // 对响应数据进行处理，例如解包数据
    return response.data || response;
  },
  (error) => {
    // 统一处理错误
    const { response } = error;
    if (response) {
      // 服务器返回了状态码
      console.error(`Error ${response.status}: ${response.statusText}`);
    } else if (error.message) {
      // 网络错误或其他错误
      console.error(`Error: ${error.message}`);
    }
    return Promise.reject(error);
  }
);

---

四、统一错误处理

统一错误处理是封装 Axios 的重要部分，它可以帮助开发者快速定位问题，同时为用户提供友好的错误提示。

示例：统一错误处理逻辑

function handleError(error) {
  const { response } = error;
  if (response) {
    // 服务器返回了错误状态码
    switch (response.status) {
      case 401:
        console.error("未授权，请登录！");
        break;
      case 403:
        console.error("权限不足！");
        break;
      case 404:
        console.error("请求资源未找到！");
        break;
      case 500:
        console.error("服务器内部错误！");
        break;
      default:
        console.error(`未知错误：${response.statusText}`);
    }
  } else {
    // 网络错误或其他错误
    console.error(`请求失败：${error.message}`);
  }
  return Promise.reject(error);
}

---

五、封装为模块

将封装后的 Axios 实例导出为模块，方便在项目中统一使用。

示例：封装为模块

// src/axios.js
import axios from "axios";

const axiosInstance = axios.create({
  baseURL: "https://api.example.com",
  timeout: 5000,
  headers: { "Content-Type": "application/json" }
});

// 请求拦截器
axiosInstance.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem("authToken");
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
axiosInstance.interceptors.response.use(
  (response) => response.data || response,
  handleError
);

export default axiosInstance;

// 错误处理函数
function handleError(error) {
  const { response } = error;
  if (response) {
    console.error(`Error ${response.status}: ${response.statusText}`);
  } else {
    console.error(`Error: ${error.message}`);
  }
  return Promise.reject(error);
}

在项目中使用封装后的 Axios：

// 使用封装后的 axios 实例
import axiosInstance from "@/axios";

axiosInstance.get("/users").then((data) => {
  console.log(data);
});

---

六、总结

通过封装 Axios，我们不仅可以实现统一的请求拦截和响应处理，还可以提升代码的可维护性和用户体验。在实际开发中，可以根据具体需求进一步扩展封装逻辑，例如添加日志记录、重试机制等。希望本文能帮助你在使用 Axios 时更加高效和灵活。