Vue项目中Axios封装实战指南（兼容Vue2/Vue3）

最新推荐文章于 2025-12-12 12:36:47 发布

原创

最新推荐文章于 2025-12-12 12:36:47 发布 · 1.1k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #Axios

前言：在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。

二、核心封装：创建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