微信小程序 封装 wx.request

### 微信小程序封装 `wx.request` 示例及最佳实践 #### 1. 创建请求工具模块 为了更好地管理和维护代码，在项目的 utils 文件夹下创建一个新的 JavaScript 文件 request.js。 ```javascript // utils/request.js const baseUrl = 'https://api.example.com'; // 替换成实际的基础URL function request(url, method = 'GET', data = {}, header = {}) { return new Promise((resolve, reject) => { wx.request({ url: `${baseUrl}${url}`, method, data, header: { ...header, 'content-type': 'application/json' // 默认值 }, success(res) { resolve(res.data); }, fail(err) { reject(err); } }); }); } ``` 此函数接受四个参数：API路径、HTTP方法类型、发送的数据对象以及自定义头部信息。它返回一个Promise实例，使得异步操作更加直观易读[^3]。 #### 2. 添加通用错误处理机制 当遇到网络异常或其他不可预见的情况时，应该有统一的方式去捕获并展示给用户友好的提示消息： ```javascript // 继续编辑 utils/request.js async function safeRequest(...args) { try { let res = await request(...args); if (res.statusCode >= 400) throw new Error('Server error'); return res; } catch (error) { console.error(error.message || "Network Error"); wx.showToast({ title: '加载失败，请稍后再试...', icon: 'none'}); throw error; // 或者可以选择不抛出而是在这里结束流程 } } module.exports = { request, safeRequest }; ``` 这段代码增加了对服务器响应状态码的判断，并且利用了 async/await 结构来简化异步编程模型下的错误捕捉过程[^4]。 #### 3. 实现拦截器模式增强灵活性 对于某些特定场景可能需要在每次发起请求前做一些预处理工作（比如添加token验证），可以在原有基础上进一步扩展功能： ```javascript // 修改后的 utils/request.js 版本 let interceptors = []; function addInterceptor(interceptorFn){ interceptors.push(interceptorFn); } function enhancedRequest(config={}) { const configWithDefaults = Object.assign({}, config); // 执行所有已注册的拦截器 interceptors.forEach(fn=>fn(configWithDefaults)); return safeRequest( configWithDefaults.url, configWithDefaults.method, configWithDefaults.data, configWithDefaults.header ); } module.exports = {addInterceptor,enhancedRequest}; ``` 通过这种方式可以轻松地向每一次请求注入额外的行为逻辑而不必修改核心库本身[^1]。