Promise.all解析及其用法（注意事项）

为什么谨慎使用Promise.all？

有一天， 测试跟我反馈说，用户信息页面挂掉了， 整个页面的是空白的（无数据）。
打开浏览器调试了一下，发现只是一个获取用户爱好的接口挂掉了。那么一个接口挂掉了为什么会导致整个页面无数据呢？

先定位一下出问题的代码：

Promise.all([occupations(), hobbies(), vehicles(), user()])
  .then(res => {
    this.occupationItems = res[0]
    this.hobbiesItems = res[1] // 这个数据拿不到
    this.vehiclesItems = res[2]
    this.user = res[3]
  })
  .catch(console.error)

这是用户信息页面的代码，用途是请求用户职业，喜好，名下车辆，用户详情等信息。请求回来之后，统一在then里面进行处理。

回忆一下promise.all的用法： 传递一个promise的数组，当所有的promise都完成（resolved）,回调所有成功的结果， 或者有一个失败， 回调第一个失败的结果。

在当前状况下， hobbies接口返回500，promise变成rejected状态，然后就不会执行then回调了。

本身使用promise.all的目的是为了简化代码，否则就要拆开写：

hobbies()
  .then(hobbiesItems => { this.hobbiesItems = hobbiesItems })

occupations()
  .then(occupationItems => { this.occupationItems = occupationItems })

vehicles()
  .then(vehicleItems => { this.vehiclesItems = vehicleItems })

user()
  .then(currentUser => { this.user = currentUser })

如果有一个回调执行失败，then是不会执行的，或者说，所有的promise也都失败了。这会使得项目的容错大大降低，也许可能只是一个不关键的数据加载失败，其他所有的数据也不会显示。

那怎么办？别急，看看下面的介绍，有两种办法

办法一：为每一个promise设置catch捕获异常状态
办法二：Promise.allSettled()
办法三：将赋值操作放到每一个promise的异步里面自行处理

办法二参考：https://segmentfault.com/a/1190000020034361

下面主要讲办法一

假设有以下代码案例：

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

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

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

Promise.all([p1, p2, p3])
.then(result => console.log('result:', result))
.catch(e => console.log('eee', e));

如果得到的结果无法理解，那么可以继续往下看

Promise对象有以下两个特点。

（1）对象的状态不受外界影响

Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果

Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

Promise.all() 方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。

多个 Promise 任务同时执行，如果全部成功执行，则以数组的方式返回所有 Promise 任务的执行结果。 如果有一个 Promise 任务 rejected，则只返回 rejected 任务的结果。

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

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

p的状态由p1、p2、p3决定，分成两种情况

（1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
（2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

// 生成一个Promise对象的数组
const promises = [2, 3, 5, 7, 11, 13].map(function (id) {
  return getSourceApi('/post/' + id + ".json");
});

Promise.all(promises).then(function (posts) {
  // ...
}).catch(function(reason){
  // ...
});

PS：如果作为参数的 Promise 实例，自己定义了catch方法，那么它一旦被rejected，并不会触发Promise.all()的catch方法。

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会resolved，p2首先会rejected，但是p2有自己的catch方法，该方法返回的是一个新的 Promise 实例，p2指向的实际上是这个实例。

该实例执行完catch方法后，也会变成resolved，导致Promise.all()方法参数里面的两个实例都会resolved，因此会调用then方法指定的回调函数，而不会调用catch方法指定的回调函数。

如果p2没有自己的catch方法，就会调用Promise.all()的catch方法。

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

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

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