Vue项目中Axios封装实战指南（兼容Vue2/Vue3）
前言：在Vue项目开发中，Axios是最常用的HTTP请求库，但直接在组件中零散使用会导致代码冗余、错误处理不一致等问题。本文带来一套工业级Axios封装方案，涵盖请求/响应拦截、环境隔离、API统一管理、错误分类处理等核心功能，同时适配Vue2和Vue3，新手也能直接套用！
一、前置准备：安装Axios
首先确保项目中已安装Axios依赖，若未安装执行以下命令：
npm install axios --save # 或使用yarn（推荐） yarn add axios提示：若项目使用Element UI/Plus作为UI组件库，建议同步安装（用于后续错误提示），Vue2安装Element UI，Vue3安装Element Plus。
提示：若项目使用Element UI/Plus作为UI组件库，建议同步安装（用于后续错误提示），Vue2安装Element UI，Vue3安装Element Plus。
二、核心封装：创建request.js工具类
在src/utils/目录下新建request.js文件，这是Axios封装的核心文件，包含实例创建、拦截器配置、通用请求方法封装等功能。
2.1 完整封装代码（Vue3+Element Plus版本）
import axios from 'axios' // 引入UI组件库的提示组件（用于错误/成功提示） import { ElMessage, ElMessageBox } from 'element-plus' // Vue3状态管理：Pinia（Vue2替换为Vuex） import { useUserStore } from '@/stores/user' // 引入路由实例（用于Token过期跳转登录页） import router from '@/router' /** * 1. 创建Axios实例 * 核心作用：统一配置基础请求地址、超时时间、默认请求头 */ const service = axios.create({ // 基础请求地址（从环境变量中获取，实现环境隔离） baseURL: import.meta.env.VITE_API_BASE_URL, timeout: 10000, // 请求超时时间：10秒 headers: { 'Content-Type': 'application/json;charset=utf-8' // 默认请求头：JSON格式 } }) /** * 2. 请求拦截器：请求发送前的统一处理 * 核心功能：添加Token、过滤无效参数、防止重复请求（可选） */ service.interceptors.request.use( (config) => { // 2.1 给请求头添加Token（后端约定字段，通常为Authorization） const userStore = useUserStore() if (userStore.token) { // 格式：Bearer + Token（后端若有其他格式可调整） config.headers.Authorization = `Bearer ${userStore.token}` } // 2.2 处理GET请求参数：过滤空值（可选，根据业务需求） if (config.method === 'get' && config.params) { config.params = Object.fromEntries( Object.entries(config.params).filter(([_, value]) => { // 过滤 undefined、null、空字符串 return value !== undefined && value !== null && value !== '' }) ) } return config }, (error) => { // 请求拦截器错误：如参数格式错误、网络未连接等 console.error('请求拦截器异常：', error) ElMessage.error('请求初始化失败，请检查网络或参数') return Promise.reject(error) } ) /** * 3. 响应拦截器：请求返回后的统一处理 * 核心功能：统一解析响应数据、错误码处理、Token