uniapp +vue3 axios 的api接口文件封装
时间: 2025-07-06 09:36:16 浏览: 4
<think>好的,用户想知道如何在UniApp和Vue3项目中封装Axios的API接口。首先,我需要回忆一下UniApp和Vue3的相关知识。UniApp通常使用uni.request进行网络请求,而Vue3项目则常用Axios。用户可能希望像在Vue中使用Axios那样,在UniApp中也能封装类似的请求方法,提高代码复用性和可维护性。
首先,针对UniApp部分。根据引用[1],UniApp的封装需要基于uni.request,可能需要创建一个request.js文件,设置基础URL、拦截器等。需要处理请求前和响应后的逻辑,比如添加token、处理错误信息。然后导出封装后的函数,供其他模块调用。这部分需要参考引用中的步骤,比如创建实例、拦截器、封装get/post方法。
然后是Vue3部分,引用[2]和[3]提到使用Vite和Axios进行封装。需要安装Axios,创建实例,设置拦截器,统一管理API接口。可能需要分层次,比如在api目录下组织各个模块的接口,使用async/await或Promise进行处理。同时,要注意错误处理,比如全局捕获错误,提示用户。
用户可能需要具体的示例代码,所以在回答中要提供UniApp和Vue3两部分的代码片段。比如UniApp中的request.js如何封装,如何调用;Vue3中如何创建service实例,定义接口函数,并在组件中使用。
同时,用户可能关心最佳实践,比如如何管理不同环境的基础URL,如何处理Token过期,如何统一加载状态提示。需要提到这些点,并给出建议,比如使用环境变量,结合Vuex或Pinia进行状态管理。
还要注意区分UniApp和Vue3的不同点,UniApp没有Axios,所以必须用uni.request,而Vue3可以使用Axios。在UniApp中封装时要模拟Axios的拦截器机制,保持相似的调用方式,方便用户迁移或统一代码风格。
最后,用户可能需要相关问题,比如性能优化、拦截器扩展、跨域处理等,需要生成相关的问题,帮助用户进一步探索。</think>### UniApp中封装请求接口(类似Axios)
在UniApp中需基于`uni.request`进行二次封装,以下是实现步骤:
**1. 创建`request.js`基础封装**
```javascript
// utils/request.js
const BASE_URL = 'https://api.example.com'
const request = (options) => {
return new Promise((resolve, reject) => {
uni.request({
url: BASE_URL + options.url,
method: options.method || 'GET',
data: options.data || {},
header: {
'Content-Type': 'application/json',
'Authorization': uni.getStorageSync('token')
},
success: (res) => {
if (res.statusCode === 200) {
resolve(res.data)
} else {
uni.showToast({ title: '请求异常', icon: 'none' })
reject(res)
}
},
fail: (err) => {
uni.showToast({ title: '网络错误', icon: 'none' })
reject(err)
}
})
})
}
export default request
```
**2. 创建接口管理文件**
```javascript
// api/user.js
import request from '@/utils/request'
export const login = (data) => {
return request({
url: '/user/login',
method: 'POST',
data
})
}
```
**3. 组件调用示例**
```javascript
import { login } from '@/api/user'
const handleLogin = async () => {
try {
const res = await login({ username: 'admin', password: '123456' })
console.log('登录结果:', res)
} catch (e) {
console.error('登录失败:', e)
}
}
```
### Vue3 + Axios封装最佳实践
**1. 创建Axios实例**
```javascript
// src/utils/request.js
import axios from 'axios'
const service = axios.create({
baseURL: import.meta.env.VITE_API_URL,
timeout: 10000
})
// 请求拦截器
service.interceptors.request.use(config => {
config.headers.Authorization = localStorage.getItem('token')
return config
})
// 响应拦截器
service.interceptors.response.use(
response => response.data,
error => {
console.error('请求错误:', error)
return Promise.reject(error)
}
)
export default service
```
**2. 接口模块化管理**
```javascript
// src/api/auth.js
import service from '@/utils/request'
export const getProfile = () => service.get('/user/profile')
export const updateUser = (data) => service.put('/user', data)
```
**3. 组件调用方式**
```vue
<script setup>
import { getProfile } from '@/api/auth'
const fetchData = async () => {
const userData = await getProfile()
console.log('用户数据:', userData)
}
</script>
```
### 最佳实践建议
1. **环境变量管理**:使用`.env`文件区分开发/生产环境
```env
VITE_API_URL=https://dev.api.com # 开发环境
VITE_API_URL=https://prod.api.com # 生产环境
```
2. **类型声明支持**(TypeScript)
```typescript
// types/api.d.ts
declare interface ResponseData<T> {
code: number
data: T
message: string
}
```
3. **错误处理增强**
```javascript
// 在响应拦截器中添加
if (error.response.status === 401) {
router.push('/login')
}
```
4. **取消请求支持**
```javascript
const controller = new AbortController()
service.get('/api', { signal: controller.signal })
```
### 关键差异对比
| 特性 | UniApp封装 | Vue3+Axios封装 |
|-------------------|-----------------------|----------------------|
| 底层实现 | `uni.request` | `XMLHttpRequest` |
| 拦截器机制 | 手动实现 | 内置支持 |
| 取消请求 | 需自行实现 | 支持AbortController |
| 文件上传 | 需用`uni.uploadFile` | 直接支持 |
[^1]: 如何在uniapp中封装request,像Vue Axios一样调用API接口
[^2]: vue3 + vite 进行axios请求封装及接口API的统一管理
[^3]: vue3 Axios封装使用
阅读全文
相关推荐


















