uniapp +vue3 axios 的api接口文件封装

<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封装使用