Promise.all的使用

最新推荐文章于 2024-06-18 08:00:00 发布

该走的弯路，一步都不会少。

最新推荐文章于 2024-06-18 08:00:00 发布

阅读量402

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序

本文链接：https://blog.youkuaiyun.com/weixin_44292923/article/details/104769539

小程序专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在微信小程序中使用Promise.all来同步多个异步请求，确保所有数据加载完成后统一渲染页面，提高用户体验。通过示例代码展示Promise.all的具体应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在多处调用Promise函数的时候,可以使用Promise
我应用的场景是当全部数据都加载之后才熏染出数据

wx.showLoading() 是小程序加载的图标
wx.hideLoading() 是小程序结束加载图标

三个请求的时候很难把握时候结束加载

	const bid = options.bid
    const detail = bookModel.getDetail(bid);
    const comment = bookModel.getComment(bid);
    const likeStatus = bookModel.getLikeStatus(bid);
    
	detail.then(res=>{
      console.log(res)
        this.setData({
          book:res
        })
    })

    comment.then(res=>{
      console.log(res)
      this.setData({
        comment:res.comments
      })
    })

    likeStatus.then(res=>{
      console.log(res)
      this.setData({
        likeStatus: res.like_status,
        likeCount: res.fav_nums
      })
    })

使用Promise.all

wx.showLoading()//请求之前加载图标
Promise.all([detail,comment,likeStatus])
    .then(res=>{
      this.setData({
        book:res[0],
        comment:res[1].comments,
        likeStatus:res[2].like_status,
        likeCount: res[2].fav_nums
      })
      wx.hideLoading()//三个请求数据之后结束
    })