Vue3 后台项目接口封装全量方案

以下是涵盖请求拦截、响应拦截、错误处理、接口统一管理、环境区分的全量实现，适配 Vue3 + Vite 技术栈，支持 TS/JS 双环境。

一、核心依赖

核心使用 axios 作为 HTTP 请求库，先安装依赖：

# npm npm install axios --save # yarn yarn add axios # pnpm pnpm add axios

二、第一步：封装 axios 实例（请求 / 响应拦截）

在项目 src 目录下创建 utils/request.ts（TS 版本，JS 可删除类型定义直接使用），封装全局 axios 实例，处理拦截器、超时、请求头等通用配置。

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios'; import { ElMessage, ElMessageBox } from 'element-plus'; // 假设使用 Element Plus 做UI提示（可替换为其他UI库） import { useUserStore } from '@/stores/user'; // Pinia 用户状态管理（存储token等） import { useRouter } from 'vue-router'; // 路由跳转 // 1. 创建 axios 实例 const service: AxiosInstance = axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL, // 环境变量配置接口基础地址 timeout: 10000, // 请求超时时间（10秒） headers: { 'Content-Type': 'application/json;charset=utf-8' // 默认请求头 } }); // 2. 请求拦截器：添加token、处理请求参数等 service.interceptors.request.use( (config: AxiosRequestConfig) => { const userStore = useUserStore(); // 给请求头添加token（后台鉴权常用） if (userStore.token) { config.headers = config.headers || {}; config.headers['Authorization'] = `Bearer ${userStore.token}`; // 格式根据后台要求调整（可改为 token: xxx） } return config; }, (error: AxiosError) => { // 请求发送前的错误处理 console.error('请求拦截器错误：', error); return Promise.reject(error); } ); // 3. 响应拦截器：统一处理响应结果、错误码 service.interceptors.response.use( (response: AxiosResponse) => { const res = response.data; // 后台返回的原始数据（一般是JSON格式） // 假设后台统一响应格式：{ code: number, msg: string, data: any } // code=200 表示请求成功（具体状态码根据后台约定调整） if (res.code !== 200) { // 提示错误信息 ElMessage.error(res.msg || '请求失败'); // 特殊错误码处理：如