实现一个功能就是点进详情页的时候,页面会出现加载的动画,等到页面的数据请求结束后,加载动画消失:
这边的加载动画,我们可以用到小程序自带的方法
显示加载:wx.showLoading()
隐藏加载:wx.hideLoading()
那么该如何判断请求结束后,隐藏掉加载的动画呢?
可以采用 promise.all方法可以把多个promise实例合并为一个
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//展示加载
wx.showLoading()
//page接收外部传过来的id 从而进入Id对应的详情页
const bid = options.bid;//从组件那边接到bid
const detail = bookModel.getDetail(bid);
const comments = bookModel.getComments(bid);
const likeStatus = bookModel.getLikeStatus(bid);
//并行请求 -- detail comments likeStatus
Promise.all([detail,comments,likeStatus]).then((res)=>{
this.setData({
//将下面三个请求 并行到一起
book:res[0],
comments:res[1].comments,
likeStatus:res[2].like_status,
likeStatus:res[2].fav_nums
})
wx.hideLoading()
})
},
})
我们着重看这段代码:promise.all将三个promise请求合并到一起,也就是并行请求,
首先点击详情页的时候,肯定是获取到对应的Id,然后调用每个model下面的方法并传入参数详情页的id
然后并行请求,请求结束后就可以隐藏加载的动画,代码的讲解都在注释中!
promise.all是等待所有的子promise全部执行完成之后,才会触发回调函数