微信小程序HTTP请求封装与实战

"微信小程序的HTTP请求封装是一个提高代码复用性和规范性的关键步骤，能够减少重复代码，增强代码的可维护性。本教程将详细讲解如何进行封装，并提供实例代码供参考。" 在微信小程序中，我们经常需要与服务器进行数据交互，这通常涉及到HTTP请求。上述代码展示了微信小程序中基本的HTTP请求方法，即`wx.request`。然而，这样的基础用法在实际开发中可能会变得冗余和难以管理，因此有必要进行封装。 首先，我们关注的几个关键点包括： 1. 请求参数：这是发送到服务器的数据，例如`data`对象中的`x`和`y`。 2. 请求方式：常见的有GET和POST，决定数据是包含在URL中还是放在请求体里。 3. 请求头：如`header`中的`'content-type': 'application/json'`，用于指定发送数据的格式。 4. 成功回调：`success`函数处理接收到的响应数据。 5. 失败回调：`fail`函数处理请求失败的情况。 我们不需要关注的是： 1. 请求URL：通常是固定的，可以作为全局变量或配置。 2. 接口特定规则：如特定接口的参数加密处理，这些应在封装之外单独处理。 下面是一个简单的封装示例，创建一个名为`network.js`的文件： ```javascript // network.js var API_URL = 'http://localhost/loverule/api/api.php'; var requestHandler = { params: {}, success: function(res) { // 成功处理 }, fail: function() { // 失败处理 }, }; // GET请求封装 function GET(requestHandler) { request('GET', requestHandler); } // POST请求封装 function POST(requestHandler) { request('POST', requestHandler); } // 基础请求函数 function request(method, requestHandler) { var params = requestHandler.params; // 可以在此对params进行统一处理，如加密 // ... wx.request({ url: API_URL, data: params, method: method, // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT // header: {}, // 设置请求的header success: function(res) { requestHandler.success(res); }, fail: function() { requestHandler.fail(); }, }); } ``` 通过这种方式，我们可以将通用的请求逻辑集中处理，例如错误处理和公共参数设置，而不用在每个接口调用时重复这些代码。同时，`GET`和`POST`函数简化了调用接口的代码，只需要传入必要的参数和回调函数即可。 在实际应用中，你可以进一步扩展这个封装，比如添加更多的请求方法（如PUT、DELETE），或者引入Promise来实现异步操作的链式调用，提升代码的可读性和灵活性。同时，还可以考虑添加请求拦截器，进行请求前和响应后的统一处理，例如添加全局的请求头、登录状态验证等。