这里使用 Promise.all 是否值得

Question

由于需要等待所有请求都拿到响应才会触发回调，如果其中一个请求耗时过长，将导致页面长时间等待。
之前的写法虽然不好处理 loading 状态，但是可以让响应快的数据先显示，用户体验比较好。

Answer 1

7七月 2020-02-22 00:38:03

这是个选择的问题，各有优缺点，你需要根据自己的需求选择一种方式

• 社哥 #1

  这里是可以优化的,而且不需要改多少代码.
  一个单纯的Promise只要创建出来,不论有没有写then方法,它都会马上进入`pending`状态直到变成`fullfilled`或者`reject`.
  所以这里完全可以写成:
  ```
  // 创建Promise之后
  
      Promise.all([detail,comment,favor]).then(res=>{
        console.log('receive all')
        wx.hideLoading()
      })
  
      detail.then(res=>{
        console.log('receive detail')
        this.setData({
          book:res
        })
      })
      comment.then(res=>{
        console.log('receive comment')
        this.setData({
          comments:res.comments
        })
      })
  
      favor.then(res=>{
        console.log('receive favor')
        this.setData({
          likeStatus:res.like_status,
          likeCount:res.fav_nums,
        })
      })
  ```
  这样就即兼顾了请求效率,又能实现loading的效果了.
  Promise.all([...])的then方法总在单个Promise的then方法之后再执行.

• 社哥 #2

  以上这种情况在生产环境还是很常见的.
  另外,如果钻牛角尖的话,以下代码也是可行的.
  ```
  // 创建Promise之后
  Promise.all([detail,comment]).then(...)
  Promise.all([detail]).then(...)
  Promise.all([detail.favor]).then(...)
  Promise.all([detail,favor]).then(...)
  ```
  以上的这些then方法都是能正常运作的.
  当存在多个Promise.all的时候,且状态变更时机相同时,then方法的执行优先级就是:
  单个Promise->Promise.all在代码中靠前的then方法->Promise.all在代码中靠后的then方法