Promise.all的用法及其细节

Posted 小姚同学要继续加油呀

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Promise.all的用法及其细节相关的知识,希望对你有一定的参考价值。

Promise的all方法提供了并行执行异步操作的能力,并且在所有异步操作执行完后才执行回调。可以将多个 Promise 实例,包装成一个新的 Promise 实例。

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

上面代码中,Promise.all方法接受一个数组作为参数,p1、p2、p3都是 Promise 实例,如果不是,就会先调用下面讲到的Promise.resolve方法,将参数转为 Promise 实例,再进一步处理。(Promise.all方法的参数可以不是数组,但必须具有 Iterator 接口,且返回的每个成员都是 Promise 实例。)

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
实例,自己定义了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: 报错了]

上面代码中,p1resolvedp2首先会rejected,但是p2有自己的catch方法,该方法返回的是一个新的 Promise 实例,p2指向的实际上是这个实例。该实例执行完catch方法后,也会变成resolved,导致Promise.all()方法参数里面的两个实例都会resolved,因此会调用then方法指定的回调函数,而不会调用catch方法指定的回调函数。

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

then方法也会把所有异步操作的结果放进一个数组中传给then,就是下面的results

Promise
.all([runAsync1(), runAsync2(), runAsync3()])
.then(function(results)
    console.log(results);
);

以上是关于Promise.all的用法及其细节的主要内容,如果未能解决你的问题,请参考以下文章

Promise.all的用法及其细节

Promise.all的用法及其细节

Promise以及Promise.all的简单用法

Promise以及Promise.all的简单用法

实现promise.all方法

多个请求执行完再执行下一个方法(vue Promise.all用法)