Vue3项目中我是如何封装axios请求的

# Vue3项目中我是如何封装axios请求的 ## 前言 每个新项目都要封装一次axios，这次把我在Vue3 + TypeScript项目中的封装方案分享出来，直接拿去用。 ## 基础封装 ```typescript // src/utils/request.ts import axios from 'axios' import type { AxiosRequestConfig, AxiosResponse } from 'axios' const service = axios.create({ baseURL: import.meta.env.VITE_API_URL, timeout: 10000 }) // 请求拦截器 - 自动携带token service.interceptors.request.use( (config) => { const token = localStorage.getItem('token') if (token) { config.headers.Authorization = `Bearer ${token}` } return config }, (error) => Promise.reject(error) ) ``` ## 响应拦截器 - 统一错误处理 ```typescript service.interceptors.response.use( (response: AxiosResponse) => { const { code, message, data } = response.data if (code !== 200) { ElMessage.error(message || '请求失败') if (code === 401) { router.push('/login') } return Promise.reject(new Error(message)) } return data }, (error) => { if (!error.response) { ElMessage.error('网络异常，请检查网络连接') } return Promise.reject(error) } ) ``` ## 踩坑：Token刷新竞态问题 > 之前遇到过一个坑：多个请求同时401，会触发多次Token刷新。解决方案是用一个标志位 + 请求队列。 ```typescript let isRefreshing = false let pendingRequests: Function[] = [] // 401时先尝试刷新Token if (code === 401 && !isRefreshing) { isRefreshing = true const newToken = await refreshToken() isRefreshing = false pendingRequests.forEach(cb => cb(newToken)) pendingRequests = [] } ``` ## 类型封装 ```typescript // 统一响应类型 interface ApiResult { code: number message: string data: T } // 使用示例 export const getUserInfo = (): Promise => { return service.get('/user/info') } ``` ## 总结 封装axios不难，关键是要考虑到Token刷新竞态、错误统一处理、TypeScript类型支持这几个点。