ES6中对Promise.all的理解与应用

Promise.all用于将多个Promise实例，包装成一个新的Promise实例

  <script>
    let p1 = new Promise((resolve, reject) => {
      resolve('成功1')
    })

    let p2 = new Promise((resolve, reject) => {
      resolve('成功2')
    })

    let p3 = new Promise((resolve, reject) => {
      resolve('成功3')
    })
    
    let pAll = Promise.all([p1, p2, p3])
    console.log(pAll)
  </script>

这里pAll的状态是由p1,p2,p3来决定的，只有当这三个都成功，pAll才会成功

可以看到成功的返回状态

但有一个失败，就会返回失败，这个时候只会返回第一个失败实例的返回值，会传递给pAll的回调函数

可以看到失败的返回状态

接下来看看Promise.all处理成功或失败的回调，有个需要注意的地方

当我们给p2单独去处理catch的时候

如果作为参数的实例，自己也定义了catch方法，那么一旦它是rejected，就不会触发pAll里面的catch方法

那么把它包装成一个新的Promise实例有什么作用呢？

       设想一下，如果一个页面有多个请求的话，那么渲染页面的过程根据请求返回数据的快慢来决定的，有一些返回的快，有一些返回的慢，是有所差异的，所以为了用户的体验，我们可以把所有的请求结果都合并在一起，等待所有的请求返回数据之后，然后再一起去渲染页面。

首先还是对Promise.all汇总

    function getBannerList() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve('轮播图数据')
        }, 1000)
      })
    }
    function getMusicList() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve('歌曲列表数据')
        }, 2000)
      })
    }
    function getCateList() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve('歌单分类数据')
        }, 3000)
      })
    }
    // 多个请求结果合并在一起
    function init() {
      let All = Promise.all([getBannerList(), getMusicList(), getCateList()])
      console.log(All)
    }
    init()

需求：等待所有请求返回之后再进行渲染