小程序学习--promise.all用法详解

实现一个功能就是点进详情页的时候,页面会出现加载的动画,等到页面的数据请求结束后,加载动画消失:

这边的加载动画,我们可以用到小程序自带的方法

显示加载: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全部执行完成之后,才会触发回调函数