uniappH5 request.js

### UniApp H5 `request.js` 实现网络请求 在UniApp H5项目中，为了更好地管理和复用网络请求逻辑，通常会创建一个独立的文件如`request.js`来封装网络请求功能。这不仅提高了代码可维护性和重用率，还使得错误处理更加集中化。 #### 封装基础请求函数 可以基于`uni.request()`构建更通用的基础请求函数，在此过程中加入默认配置项以及公共参数设置： ```javascript // src/utils/request.js export default function request(options) { const baseUrl = 'https://your-api-base-url.com/api'; return new Promise((resolve, reject) => { uni.request({ ...options, url: `${baseUrl}${options.url}`, method: options.method || 'GET', header: { ...(options.header || {}), 'Content-Type': 'application/json' }, success: (response) => resolve(response), fail: (error) => reject(error) }); }); } ``` 上述代码片段展示了如何定义一个名为`request`的异步函数[^1]，该函数接受一个对象作为参数并返回一个新的Promise实例。这样做的好处是可以利用async/await语法简化调用方代码结构的同时保持良好的异常捕获能力。 #### 使用封装后的API发起请求 有了这个工具类之后，在组件内部就可以很方便地使用它来进行各种类型的HTTP操作了： ```vue <template> <view class="container"> <!-- 组件模板 --> </view> </template> <script> import request from '@/utils/request'; export default { data() { return { message: '' }; }, onLoad() { // 发送GET请求获取数据 async function fetchData() { try { let response = await request({url:'/example'}); console.log('Response:', response); this.message = JSON.stringify(response.data); } catch (err) { console.error(err); } } fetchData.call(this); } }; </script> ``` 这段Vue单文件组件中的JavaScript部分说明了怎样通过引入之前编写的辅助模块，并在其生命周期钩子内执行具体的业务逻辑——即向服务器端发出查询命令并将响应结果显示给用户[^2]。 #### 错误与状态码处理 对于可能出现的不同情况下的服务端反馈（比如认证失败、资源未找到等），应该考虑完善相应的分支判断机制以便给出恰当提示或采取其他措施： ```javascript success: (res) => { if (res.statusCode >= 200 && res.statusCode < 300) { // 正常情况下解析JSON格式的数据体 resolve(JSON.parse(res.data)); } else { switch (res.statusCode) { case 401: alert('登录已过期，请重新登录'); break; case 404: alert('找不到对应的资源'); break; default: alert(`发生未知错误(${res.statusCode})`); } reject(new Error(`Server responded with status code ${res.statusCode}`)); } }, fail: () => { reject(new Error('Network error')); } ``` 这里增加了对不同HTTP状态码的支持[^3]，确保即使遇到意外状况也能给予清晰的信息指引而非简单的报错信息。