vue3中uniapp封装接口

<think>好的，我现在需要回答用户关于在Vue3中使用UniApp封装接口的最佳实践和示例代码的问题。首先，我得理清用户的需求，他们可能希望了解如何有效地封装网络请求，以便在多个页面中复用，同时处理错误和统一配置。 首先，我应该回顾一下用户提供的参考内容。引用[1]提到封装网络请求方法可以统一处理错误信息，提高开发效率和代码质量。引用[2]则对比了Vue3项目中axios的封装方式，指出UniApp中使用uni.request的不同之处。因此，我需要结合这些信息，给出适合Vue3和UniApp的封装方法。 接下来，我需要考虑如何在Vue3的setup语法中组织代码。通常，封装请求会涉及创建实例、设置拦截器、处理响应和错误。由于UniApp使用的是uni.request而不是axios，所以需要调整封装方式。可能需要创建一个请求函数，包含基础URL、超时设置、请求头等配置。 然后，处理请求拦截器和响应拦截器。请求拦截器可以用来添加token等认证信息，而响应拦截器则处理全局的错误提示和数据结构解析。例如，接口可能返回统一的code字段，根据不同的code进行相应的处理，比如跳转到登录页面或提示错误信息。 另外，用户可能希望看到示例代码，包括如何定义类型（使用TypeScript），如何导出封装的请求函数，以及如何在页面中调用。需要确保代码符合Vue3和UniApp的语法，比如使用composition API，以及在setup中使用async/await。 还需要考虑最佳实践，比如将接口按模块划分，使用环境变量管理基础URL，错误处理的统一方式，以及请求的取消或重试机制。这些内容可以分点列出，帮助用户理解关键点。 最后，生成相关问题，可能涉及如何优化封装、处理特定错误码、结合Pinia进行状态管理，以及TypeScript的类型定义等。这些问题应该围绕用户可能进一步探索的方向展开。 现在需要组织这些思考点，形成一个结构清晰的回答，包含步骤说明、代码示例和最佳实践，同时确保引用正确，并在末尾添加相关问题。</think>### Vue3 UniApp 封装接口的最佳实践 #### 1. 基础请求封装 在Vue3中，可通过组合式API将`uni.request`封装为可复用的函数。以下示例结合TypeScript和拦截器功能： ```typescript // utils/request.ts type RequestOptions = UniNamespace.RequestOptions & { params?: Record<string, any>; showLoading?: boolean; }; const BASE_URL = import.meta.env.VITE_API_BASEURL; export const http = <T>(options: RequestOptions): Promise<T> => { // 请求拦截器 if (options.showLoading) uni.showLoading({ title: '加载中' }); const token = uni.getStorageSync('token'); return new Promise((resolve, reject) => { uni.request({ url: BASE_URL + options.url, method: options.method || 'GET', data: options.params || {}, header: { 'Authorization': token ? `Bearer ${token}` : '', ...options.header }, success: (res) => { // 响应拦截器 if (res.statusCode !== 200) { uni.showToast({ title: '网络请求失败', icon: 'error' }); return reject(res); } const data = res.data as { code: number; data: T; msg: string }; if (data.code === 401) { // token过期处理 uni.navigateTo({ url: '/pages/login/index' }); return reject(data); } if (data.code !== 200) { uni.showToast({ title: data.msg || '请求失败', icon: 'none' }); return reject(data); } resolve(data.data); }, fail: (err) => { uni.showToast({ title: '网络连接失败', icon: 'error' }); reject(err); }, complete: () => { if (options.showLoading) uni.hideLoading(); } }); }); }; ``` #### 2. 接口模块化（示例） ```typescript // api/user.ts import { http } from '@/utils/request'; export const userApi = { login: (data: { username: string; password: string }) => http<{ token: string }>({ url: '/login', method: 'POST', params: data }), getProfile: () => http<UserProfile>({ url: '/profile', showLoading: true }) }; ``` #### 3. 页面调用示例 ```vue <script setup lang="ts"> import { userApi } from '@/api/user'; const handleLogin = async () => { try { const { token } = await userApi.login({ username: 'admin', password: '123456' }); uni.setStorageSync('token', token); } catch (error) { console.error('登录失败:', error); } }; </script> ``` ### 最佳实践要点 1. **环境变量管理** 使用`.env`文件区分开发/生产环境： ```env VITE_API_BASEURL = 'https://dev.example.com/api' ``` 2. **类型安全** 为接口响应定义泛型类型： ```typescript type ApiResponse<T> = { code: number; data: T; msg: string; }; ``` 3. **错误处理分层** - 网络层错误（statusCode非200） - 业务逻辑错误（code非200） - 特殊状态码处理（如401跳转登录） 4. **请求取消支持** 可通过`AbortController`实现： ```typescript const controller = new AbortController(); http({ signal: controller.signal, // ... }); // 需要时调用 controller.abort() ``` 5. **性能优化** - 设置合理的请求超时（建议6-10秒） - 重要接口增加自动重试机制 - 频繁请求添加防抖/节流 [^1][^2]