2018W31—Promise.all()

Promise.all可以将多个Promise实例包装成一个新的Promise实例。

用法：

const p = Promise.all([p1, p2, p3]);

同时，成功和失败的返回值是不同的：

（1）、成功的时候返回的是一个结果数组，只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。

（2）、失败的时候则返回最先被reject失败状态的值，只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被rejected的实例的返回值，会传递给p的回调函数。

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

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

let p3 = Promse.reject('失败了')

Promise.all([p1, p2]).then((result) => {
  console.log(result)               
}).catch((error) => {
  console.log(error)
})

返回结果：['成功了', 'success']


Promise.all([p1,p3,p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)     
})

返回结果：失败

结果说明：当p1、p2两个都成功的时候返回成功，当p1、p2、p3中有一个失败时返回第一个reject的值。

当需要处理多个异步时，Promse.all就显得很好用，比如说一个页面上需要等两个或多个ajax的数据回来以后才能正常进行。

resultBack (time) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${time / 1000}秒后返回结果`)
    }, time)
  })
}

let p1 = resultBack (5000)
let p2 = resultBack (3000)

Promise.all([p1, p2]).then((result) => {
  console.log(result)    
}).catch((error) => {
  console.log(error)
})

返回结果：[ '5秒后返回结果', '3秒后返回结果' ]

通过结果我们发现，p1是5s返回的结果，比p2晚，但是Promise.all返回的是按照p1,p2的顺序来的。这就说明Promise.all的一个特点：Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的，即p1的结果在前，及时p1的结果获取的比p2要晚。这样的好处是：在前端开发请求数据的过程中，偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景，使用Promise.all可以很完美的解决这个问题。

注意，如果作为参数的 Promise 实例，自己定义了catch方法，那么它一旦被rejected，并不会触发Promise.all的catch方法。下面引一下阮一峰ES6里的实例：

const p1 = new Promise((resolve, reject) => {
  resolve('hello');
})
.then(result => result)
.catch(e => e);

const p2 = new Promise((resolve, reject) => {
  throw new Error('报错了');
})
.then(result => result)
.catch(e => e);

Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
// ["hello", Error: 报错了]

p1走resolve，p2首先会rejected，但是p2有自己的catch，catch返回的是一个新的 Promise 实例，p2指向的实际上是这个实例。该实例执行完catch方法后，也会变成resolve，所以promise.all返回的是成功的结果，不会走自己的catch了。