微信小程序HTTP请求封装实践：ES6 Promise版

本文主要介绍了如何在微信小程序中进行Http请求的高级封装，利用ES6的Promise进行异步处理，以提高代码的可读性和维护性。作者首先创建了一个配置文件`config.js`来设置请求的基础URL，然后在`ServiceBase.js`中编写了核心的Http请求封装代码。 在微信小程序中，数据请求是应用程序开发的关键部分，类似Web应用中的Ajax请求。为了简化和规范化这一过程，我们可以编写一个服务基类，对Http请求进行统一管理。在`ServiceBase.js`中，作者定义了一个名为`ServiceBase`的类，这个类包含了请求的基本配置和方法。 首先，`ServiceBase`类导入了`config.js`中的基础URL配置和`es6-promise.js`库以确保ES6 Promise的兼容性。接着，类的构造函数初始化了请求的基础路径，并调用了`__init`方法来设定默认值和方法。 `__init`方法内部，`__initDefaults`用于设置默认参数，如方法名的后缀（例如，所有请求方法名都以`Request`结尾）和支持的HTTP方法列表。`__initMethods`则遍历实例源对象，动态创建以小写字母加后缀名的方法，这样可以方便地为每种HTTP方法生成对应的请求函数。 在实际的请求处理中，这些方法会利用Promise来处理异步操作，提供链式调用的能力，使得错误处理更加清晰。例如，一个基本的GET请求可能如下所示： ```javascript getuserInfo() { return new Promise((resolve, reject) => { wx.request({ url: this.$$basePath + '/getUserInfo', // 请求地址 method: 'GET', success: res => { if (res.statusCode === 200) { resolve(res.data); // 请求成功，返回数据 } else { reject(new Error('请求失败，状态码：' + res.statusCode)); } }, fail: err => { reject(err); // 请求失败，返回错误信息 }, }); }); } ``` 通过这种方式，开发者可以方便地调用`getuserInfo()`并链式处理结果，例如： ```javascript ServiceBase.getuserInfo() .then(data => { console.log('用户信息：', data); // 处理成功情况 }) .catch(error => { console.error('获取用户信息失败：', error); // 处理失败情况 }); ``` 这样的封装不仅简化了代码，也使得错误处理更加集中和一致。对于其他HTTP方法（如POST、PUT等），只需按照同样的模式进行封装即可。 总结起来，微信小程序的Http请求高级封装是通过创建一个服务基类，结合ES6的Promise特性，实现了HTTP请求的规范化和异步处理的优雅方式。这提高了代码的可维护性，降低了开发复杂度，同时也为日后的功能扩展提供了便利。