![9c4e44cea7c95e4bdc21d6acb57aeca0.png](https://i-blog.csdnimg.cn/blog_migrate/1c9725f7ea8533342b2bf87f2dddd0db.jpeg)
之前写了一篇 Promise 在微信小程序中的应用 使用 Promise 来封装 wx.request 请求
const getData = (url, callBack) => {
return new Promise(function(resolve, reject){
wx.request({
url: url,
header: {
Accept: 'application/vnd.api+json'
},
success: (res) => {
const data = res.data;
resolve(data)
},
fail: err => {
console.log('Api fetch fail!')
},
complete: () => {
callBack && callBack();
}
})
})
}
module.exports = {
getData: getData
}
我把它放入到了一个独立的js文件中,充当无任何UI组件逻辑的纯粹提供服务的功能,谁需要谁调用,首页需要首页调用,列表页需要列表页调用,那么问题来了,这样会导致网络数据请求非常的慢,没有必要都请求,首页请求的数据可以缓存起来,列表页可以直接用,详情页也可以用。
微信小程序提供了,wx.getStorageSync() 方法设置 storage 缓存:
![f02d7fb81f5ff1705a40f912fed408ef.png](https://i-blog.csdnimg.cn/blog_migrate/cec525df96ae5e0f9df46c7b6a18f097.jpeg)
onLoad: function (options) {
const res = wx.getStorageSync('_res');
if (res) {
this.setArticle(res)
} else {
ArticleService.getData('http://xxx.com/api').then(res => {
this.setArticle(res, type);
// 缓存数据
wx.setStorageSync('_res', res);
})
}
}
在开发过程中,建议开启体验评分,可看到详细的优化建议:
![754522264bce3ed9226e0fdda2d7cd94.png](https://i-blog.csdnimg.cn/blog_migrate/955ac51a03fa2ddc554028b7f1b8d16a.jpeg)
小程序体验可扫描
![cfb4e93626884f94f5a2e131b453228f.png](https://i-blog.csdnimg.cn/blog_migrate/b4257f79b3a4ae3f689cb499b0bddafe.png)