uniapp 请求封装ajax

### UniApp 中封装 Ajax 请求的实现方式 在 UniApp 开发中，网络请求是一个常见的需求。通过封装 `wx.request` 或者类似的 API 可以让代码更加简洁、易维护和复用性强。以下是基于提供的引用内容以及最佳实践的一种封装方案。 #### 1. 基础封装 基础封装可以通过创建一个通用函数来处理所有的 HTTP 请求操作。以下是一个简单的封装示例： ```javascript // request.js 文件 const ajax = (url, method, data) => { // 显示 loading 提示框 uni.showLoading({ title: '加载中', }); return new Promise((resolve, reject) => { uni.request({ url, data, method, header: { 'content-type': 'application/json' // 设置默认 Content-Type }, success(res) { // 隐藏 loading 提示框 uni.hideLoading(); resolve(res.data); // 返回数据给调用方 }, fail(err) { // 隐藏 loading 提示框 uni.hideLoading(); reject(err); } }); }); }; export default ajax; ``` 此部分实现了基本的功能，包括显示/隐藏加载提示框、支持多种 HTTP 方法（GET、POST 等），并返回统一的结果结构[^1]。 --- #### 2. 进阶封装：按方法分类 为了更方便地使用不同的 HTTP 方法，可以进一步扩展封装，分别定义 `get`、`post`、`put` 和 `delete` 函数。这种方式能够减少重复代码量，并提高开发效率。 ```javascript // enhancedRequest.js 文件 import ajax from './request'; const wrapRequest = ({ url, method, data }) => { return ajax(url, method.toUpperCase(), data); }; export const get = (params) => wrapRequest({ ...params, method: 'GET' }); export const post = (params) => wrapRequest({ ...params, method: 'POST' }); export const put = (params) => wrapRequest({ ...params, method: 'PUT' }); export const del = (params) => wrapRequest({ ...params, method: 'DELETE' }); ``` 这种设计模式允许开发者直接调用特定的 HTTP 方法而无需手动指定参数中的 `method` 字段[^3]。 --- #### 3. 添加拦截器功能 如果项目中有复杂的业务场景，比如需要加入全局错误捕获机制或者自动刷新 token 的能力，则可以在封装的基础上增加 **请求拦截器** 和 **响应拦截器** 功能。 下面展示了一个带有无感刷新令牌功能的例子： ```javascript // advancedRequest.js 文件 let refreshTokenPending = false; const interceptors = { request(config) { config.header.Authorization = uni.getStorageSync('token'); // 自动附加 Token 到 Header 中 return config; }, response(response) { if (response.statusCode === 401 || response.errMsg.includes('invalid_token')) { // 如果检测到 Token 失效，则尝试刷新它 handleTokenRefresh().then(() => { return retryOriginalRequest(response.config); // 使用新的 Token 重试原请求 }).catch(error => { throw error; }); } return response; } }; function handleTokenRefresh() { if (!refreshTokenPending) { refreshTokenPending = true; return new Promise((resolve, reject) => { uni.request({ url: '/auth/token/refresh', // 替换为实际接口路径 method: 'POST', data: { refresh_token: uni.getStorageSync('refresh_token') }, success(result) { if (result.statusCode === 200 && result.data.success) { uni.setStorageSync('token', result.data.token); resolve(); } else { reject(new Error('Failed to refresh token')); } }, complete() { refreshTokenPending = false; } }); }); } return new Promise(resolve => setTimeout(resolve, 10)); } function retryOriginalRequest(originalConfig) { delete originalConfig['header']['Authorization']; // 清除旧 Token return ajax(originalConfig.url, originalConfig.method, originalConfig.data).then(data => data); } ``` 上述代码片段展示了如何利用拦截器解决常见问题——当用户的访问权限因 Token 超时失效时，程序会自动触发一次 Token 更新流程后再继续执行原始请求[^4]。 --- #### 4. 实际应用案例 假设我们需要在一个页面组件里获取远程服务器上的朋友推荐列表，那么可以直接这样写： ```html <template> <view>{{ friendsList }}</view> </template> <script> import { get } from '@/utils/enhancedRequest'; // 导入增强版请求工具 export default { data() { return { friendsList: [] }; }, onLoad() { this.fetchData(); }, methods: { async fetchData() { try { const res = await get('/api/task/recommendFriends'); this.friendsList = res.result; // 假设服务端返回的数据字段名为 result } catch (error) { console.error('Error fetching friend list:', error.message); } } } }; </script> ``` 这里我们引入了之前提到过的 `enhancedRequest.js` 模块里的 `get()` 方法完成异步通信过程[^2]。 --- ### 总结 以上介绍了三种不同层次的 UniApp AJAX 请求封装策略：从最简单的一般用途版本逐步过渡至具备高级特性的解决方案。每种形式都有其适用范围，具体选择取决于项目的复杂度和个人偏好。