vue对axios的封装和使用
在 Vue 项目中，使用 axios 进行 HTTP 请求是非常常见的做法。为了提高代码的可维护性、统一错误处理和请求拦截/响应拦截逻辑，对axios进行封装使用。
一、基础封装（适用于 Vue 2 / Vue 3）
1. 安装 axios
npm install axios
2. 创建封装文件：src/utils/request.js
import axios from 'axios'
import { Message } from 'element-ui' // 或你使用的 UI 库// 创建 axios 实例
const service = axios.create({baseURL: process.env.VUE_APP_API, // 设置默认 base URL（来自 .env）timeout: 5000, // 超时时间withCredentials: false // 是否携带 cookie
})// 请求拦截器
service.interceptors.request.use(config => {const token = localStorage.getItem('token')if (token) {config.headers['Authorization'] = `Bearer ${token}`}return config},error => {return Promise.reject(error)}
)// 响应拦截器
service.interceptors.response.use(response => {const res = response.dataif (res.code !== 200) {Message.error(res.message || 'Error')if (res.code === 401) {// 处理 token 失效localStorage.removeItem('token')window.location.href = '/login'}return Promise.reject(new Error(res.message || 'Error'))} else {return res}},error => {Message.error('网络异常，请检查网络连接')return Promise.reject(error)}
)export default service
二、使用封装后的 axios
1. 在组件中直接调用
import request from '@/utils/request'export default {methods: {async fetchData() {try {const res = await request.get('/api/data')console.log(res)} catch (error) {console.error(error)}}}
}
2. 在 Vuex 中使用
import request from '@/utils/request'export default {actions: {async login({ commit }, payload) {const res = await request.post('/api/login', payload)commit('SET_TOKEN', res.token)}}
}
三、支持 TypeScript（可选）
如果你使用的是 Vue + TypeScript（如 Vite + Vue 3 + TS），可以添加类型定义：
1. 定义统一返回结构
// src/types/index.ts
export interface ApiResponse<T = any> {code: numbermessage: stringdata: T
}
2. 使用泛型调用
import { ApiResponse } from '@/types'interface User {id: numbername: string
}const res = await request.get<ApiResponse<User>>('/api/user/1')
console.log(res.data.name)
四、取消重复请求（防抖）
建议常用事件无论是否发生请求也做防抖，避免重复性耗费资源
防止用户多次点击按钮导致重复请求：
import axios from 'axios'const pendingMap = new Map()function generateReqKey(config) {return [config.method, config.url].join('&')
}function addPending(config) {const key = generateReqKey(config)const controller = new AbortController()config.signal = controller.signalif (!pendingMap.has(key)) {pendingMap.set(key, controller)}
}function removePending(key) {if (pendingMap.has(key)) {const controller = pendingMap.get(key)controller.abort()pendingMap.delete(key)}
}// 请求拦截器
service.interceptors.request.use(config => {addPending(config)return config
})// 响应拦截器
service.interceptors.response.use(response => {removePending(generateReqKey(response.config))return response
}, error => {removePending(generateReqKey(error.config))return Promise.reject(error)
})
五、全局 loading（可选）
可以在请求拦截器中添加 loading，在响应拦截器中关闭：
let loadingCount = 0function startLoading() {if (loadingCount === 0) {// 显示 loading 动画store.dispatch('showLoading')}loadingCount++
}function endLoading() {loadingCount--if (loadingCount <= 0) {store.dispatch('hideLoading')}
}// 请求拦截器
service.interceptors.request.use(config => {startLoading()return config
})// 响应拦截器
service.interceptors.response.use(response => {endLoading()return response
}, error => {endLoading()return Promise.reject(error)
})
六、推荐目录结构
src/
├── utils/
│ └── request.js # axios 封装
├── types/
│ └── index.ts # 接口类型定义（TS）
├── api/
│ ├── user.js # 用户相关接口
│ ├── product.js # 商品相关接口
│ └── index.js # 导出所有 API
├── views/
│ └── ... # 页面组件
└── store/└── index.js # Vuex 状态管理（可选）
七、API 模块化示例（src/api/user.js）
import request from '@/utils/request'export function login(data) {return request({url: '/user/login',method: 'post',data})
}export function getUserInfo(token) {return request({url: '/user/info',method: 'get',params: { token }})
}
在组件中使用：
import { login } from '@/api/user'export default {methods: {async handleLogin() {const res = await login(this.loginForm)console.log(res)}}
}
总结：要点
| 特性 | 实现方式 |
|---|---|
| 请求拦截 | 添加 token、loading |
| 响应拦截 | 统一处理成功/失败逻辑 |
| 错误提示 | 使用 UI 框架提示（如 element-ui、vant） |
| 类型安全 | TypeScript 泛型支持 |
| 取消重复请求 | 使用 AbortController |
| 模块化组织 | 按功能拆分 API 文件 |
| 全局 loading | 请求计数器控制显示/隐藏 |