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

2022-01-17 11:35:10 阅读：300 来源： 互联网

标签：p2 p1 console Promise result 注意事项 catch 解析

为什么谨慎使用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 })
  .catch(console.error)

occupations()
  .then(occupationItems => { this.occupationItems = occupationItems })
  .catch(console.error)

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

user()
  .then(currentUser => { this.user = currentUser })
  .catch(console.error)

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

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

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

下面主要讲办法一
假设有以下代码案例：

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: 报错了

标签：p2,p1,console,Promise,result,注意事项,catch,解析
来源： https://blog.csdn.net/hzxOnlineOk/article/details/122535808

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9