本篇文章介绍如何使用Promise对象来封装微信小程序中的wx.request与wx.setStorage接口，并在此基础上实现数据缓存的过期时间管理机制。通过这种方式，可以有效提高应用性能并保证数据的新鲜度。
在微信小程序开发过程中，我们常常会遇到异步操作如网络请求及本地存储。`wx.request`用于发送HTTP请求，而`wx.setStorage`则用于数据的持久化存储。然而这些API都是以回调函数形式出现，这可能导致所谓的“回调地狱”，使代码难以理解和维护。为了改善这种情况，我们可以使用Promise进行封装，让代码更符合现代JavaScript编程习惯，并加入过期时间功能来提高用户体验。
1. **Promise**：ES6引入的Promise是一种处理异步操作的新方式。它代表了一个可能还未完成的异步操作的结果或最终状态。一个Promise对象有三种状态：等待（pending）、成功（fulfilled）和失败（rejected）。一旦一个Promise的状态从“等待”变更为“成功”或者“失败”，它的状态就不再改变，这保证了顺序执行。
2. **wx.request封装**：`wx.request`用于向服务器发起HTTP请求，并返回包含success、fail及complete回调的Promise对象。我们可以将这个函数封装成一个返回Promise的新函数如下：
```javascript
function wxRequest(url, data) {
return new Promise((resolve, reject) => {
wx.request({
url,
data,
method: GET, 请求方法，可以是GET或POST
success: res => {
if (res.statusCode === 200) {
resolve(res.data);
} else {
reject(new Error(请求失败，状态码： + res.statusCode));
}
},
fail: err => reject(err),
});
});
}
```
3. **wx.setStorage封装**：`wx.setStorage`用于将数据存入本地缓存。我们同样可以将其封装成一个Promise函数如下：
```javascript
function wxSetStorage(key, value, expires) {
return new Promise((resolve, reject) => {
wx.setStorage({
key,
data: value,
success() {
if (expires) {
wx.setStorageSync(expire_ + key, Date.now() + expires * 1000);
}
resolve();
},
fail: reject
});
});
}
```
4. **设置过期时间**：在存储数据时，我们可以同时保存一个过期的时间戳。例如通过`Date.now()`获取当前时间和加上期望的秒数来计算出未来的某个时刻作为过期时间点。当从缓存中读取该数据时，可以先检查它是否已经过了设定的有效期限；如果已过，则将其移除。
5. **组合使用**：在实际应用里，我们可以结合`wxRequest`和`wxSetStorage`来实现更复杂的功能。例如，在获取到网络请求的数据之后立即将其存储进本地缓存，并设置一个合理的过期时间（如1小时）。这样下次启动小程序或者再次请求数据时就可以先检查本地是否有未过期的有效数据，如果有则直接使用；如果没有，则重新发起网络请求。
示例代码如下：
```javascript
async function fetchData() {
try {
const cacheKey = myData;
const cachedData = wx.getStorageSync(cacheKey);
const expireTime = wx.getStorageSync(expire_ + cacheKey);
if (cachedData && expireTime && Date.now() < expireTime) {
console.log(使用缓存数据:, cachedData);
return cachedData;
}
const remoteData = await wxRequest(https://api.example.com/data);
await wxSetStorage(cacheKey, remoteData, 60 * 60); // 缓存1小时
console.log(获取远程数据:, remoteData);
return remoteData;
} catch (error) {
console.error(数据获取失败:, error);
}
}
fetchData().then(data => {
使用获取到的数据
});
```
以上是对`wx.request`和`wx.setStorage`进行Promise封装，并实现设置过期时间的详细解释。通过这样的封装，我们能更优雅地处理小程序中的异步操作，提升代码可读性和维护性。
5星
