Vue3中优雅封装axios的三种进阶实践
1. 为什么需要封装axios？
在Vue3项目中使用axios发送HTTP请求时，直接裸用axios虽然简单，但随着项目规模扩大，会遇到几个典型问题。首先是代码重复，每个请求都要写完整的配置；其次是难以统一管理请求和响应拦截逻辑；最后是类型提示缺失，维护成本高。这些问题都会影响开发效率和代码质量。
我接手过一个电商后台项目，初期图省事直接使用axios，结果发现几十个页面都在重复写baseURL配置和错误处理逻辑。后来接口域名变更时，光修改baseURL就花了半天时间。这种经历让我深刻认识到封装axios的必要性。
封装axios的核心价值在于：
- 统一配置：集中管理baseURL、超时时间等公共参数
- 拦截器管理：统一处理token注入、错误提示等逻辑
- 简化调用：封装常用方法，减少重复代码
- 类型安全：通过TypeScript增强代码提示和校验
2. 基础封装方案
2.1 创建axios实例
先看最基本的封装方式，创建一个request.ts文件：
import axios from 'axios' const service = axios.create({ baseURL: import.meta.env.VITE_API_URL, timeout: 10000, headers: { 'Content-Type': 'application/json' } }) // 请求拦截器 service.interceptors.request.use(config => { const token = localStorage.getItem('token') if (token) { config.headers.Authorization = `Bearer ${token}` } return config }) // 响应拦截器 service.interceptors.response.use( response => response.data, error => { if (error.response?.status === 401) { // 处理token过期 } return Promise.reject(error) } ) export default service这种封装虽然简单，但已经解决了80%的常见需求。使用时直接引入：
import request from '@/utils/request' request.get('/user/info')2.2 添加TypeScript支持
为了让封装更完善，我们需要添加类型支持。先定义基础响应类型：
interface BaseResponse<T = any> { code: number data: T message: string }然后改造axios实例：
const service = axios.create({ // ...原有配置 }) as AxiosInstance export default { get<T = any>(url: string, config?: AxiosRequestConfig): Promise<BaseResponse<T>> { return service.get(url, config) }, // 其他方法同理 }这样调用时就能获得完善的类型提示了：
const res = await request.get<{ name: string }>('/user/info') console.log(res.data.name) // 有类型提示3. 进阶封装方案
3.1 使用provide/inject实现依赖注入
在大型项目中，我们可能需要多个axios实例（比如对接不同后端服务）。Vue3的provide/inject特性非常适合这种场景。
首先在main.ts中提供实例：
import { createApp } from 'vue' import App from './App.vue' import { createAxios } from './utils/request' const app = createApp(App) // 主API实例 app.provide('mainAxios', createAxios({ baseURL: import.meta.env.VITE_MAIN_API })) // 支付API实例 app.provide('payAxios', createAxios({ baseURL: import.meta.env.VITE_PAY_API })) app.mount('#app')在组件中使用：
import { inject } from 'vue' const mainAxios = inject('mainAxios') const payAxios = inject('payAxios') // 使用方式与普通axios一致 mainAxios.get('/user') payAxios.post('/order')这种方式的优势在于：
- 实现多实例管理
- 避免全局污染
- 便于测试（可以轻松替换mock实例）
3.2 基于Composition API的工厂函数
对于更复杂的场景，我们可以创建axios工厂函数：
export function useAxios(baseOptions: AxiosRequestConfig) { const instance = axios.create(baseOptions) // 添加拦截器 instance.interceptors.request.use(config => { // 自定义逻辑 return config }) // 封装常用方法 const get = <T>(url: string, config?: AxiosRequestConfig) => { return instance.get<T>(url, config) } return { instance, get, // 其他方法... } }在组件中使用：
import { useAxios } from '@/composables/useAxios' const { get } = useAxios({ baseURL: '/api' }) const data = await get<User[]>('/users')工厂函数模式特别适合：
- 需要动态配置的场景
- 需要复用封装逻辑的组件
- 需要与其他Composition API组合使用
4. 高级技巧与实践
4.1 拦截器链式控制
复杂项目可能需要根据不同条件应用不同拦截器。我们可以实现拦截器管理器：
class InterceptorManager { private instance: AxiosInstance private interceptors = { request: [] as number[], response: [] as number[] } constructor(instance: AxiosInstance) { this.instance = instance } addRequestInterceptor(interceptor: AxiosInterceptor) { const id = this.instance.interceptors.request.use( interceptor.onFulfilled, interceptor.onRejected ) this.interceptors.request.push(id) return id } eject(id: number, type: 'request' | 'response') { this.instance.interceptors[type].eject(id) } }使用示例：
const manager = new InterceptorManager(axiosInstance) // 添加拦截器 const id = manager.addRequestInterceptor({ onFulfilled: config => { // 特殊处理逻辑 return config } }) // 移除拦截器 manager.eject(id, 'request')4.2 请求取消与竞态控制
处理频繁触发的请求时（如搜索框），需要取消之前的请求：
const pendingMap = new Map() function addPending(config: AxiosRequestConfig) { const key = `${config.method}-${config.url}` const controller = new AbortController() config.signal = controller.signal if (pendingMap.has(key)) { pendingMap.get(key).abort() } pendingMap.set(key, controller) } function removePending(config: AxiosRequestConfig) { const key = `${config.method}-${config.url}` if (pendingMap.has(key)) { pendingMap.delete(key) } } // 在拦截器中调用 service.interceptors.request.use(config => { addPending(config) return config }) service.interceptors.response.use(response => { removePending(response.config) return response })4.3 类型安全的极致实践
通过泛型和类型推导，可以实现更强大的类型安全：
type ApiMethod = 'get' | 'post' | 'put' | 'delete' interface ApiConfig<T = any> { url: string method: ApiMethod data?: T } function createApi<Req, Res>(config: ApiConfig<Req>) { return (data?: Req) => { return service<Res>({ ...config, data }) } } // 定义API const getUser = createApi<{ id: string }, { name: string }>({ url: '/user', method: 'get' }) // 调用时会有完整类型提示 const res = await getUser({ id: '123' }) console.log(res.name) // 正确推断出string类型5. 实战中的经验分享
在实际项目中封装axios时，我踩过几个坑值得注意。首先是拦截器的执行顺序问题，后添加的拦截器会先执行，这与中间件模式相反。有次调试时发现token注入失效，就是因为拦截器顺序搞错了。
其次是类型扩展的问题。axios的默认类型定义比较基础，我们需要扩展AxiosRequestConfig来支持自定义配置：
declare module 'axios' { interface AxiosRequestConfig { noToken?: boolean retry?: number } }关于错误处理，建议统一格式并区分业务错误和系统错误。我们项目中采用的格式是：
interface ErrorResult { type: 'business' | 'system' code: string message: string detail?: any }最后是性能优化方面，对于高频接口可以添加缓存层。我们实现了一个简单的内存缓存：
const cache = new Map() function withCache(fn: Function, key: string, ttl = 3000) { return async (...args: any[]) => { const cached = cache.get(key) if (cached && Date.now() - cached.time < ttl) { return cached.data } const data = await fn(...args) cache.set(key, { data, time: Date.now() }) return data } }