ES6 Promise.all用法

Promise的all方法提供了并行執(zhí)行異步操作的能力，并且在所有異步操作執(zhí)行完后才執(zhí)行回調(diào)?？梢詫⒍鄠€(gè) Promise 實(shí)例，包裝成一個(gè)新的 Promise 實(shí)例。

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

上面代碼中，Promise.all方法接受一個(gè)數(shù)組作為參數(shù)，p1、p2、p3都是 Promise 實(shí)例，如果不是，就會(huì)先調(diào)用下面講到的Promise.resolve方法，將參數(shù)轉(zhuǎn)為 Promise 實(shí)例，再進(jìn)一步處理。（Promise.all方法的參數(shù)可以不是數(shù)組，但必須具有 Iterator 接口，且返回的每個(gè)成員都是 Promise 實(shí)例。）

p的狀態(tài)由p1、p2、p3決定，分成兩種情況。

1. 只有p1、p2、p3的狀態(tài)都變成fulfilled，p的狀態(tài)才會(huì)變成fulfilled，此時(shí)p1、p2、p3的返回值組成一個(gè)數(shù)組，傳遞給p的回調(diào)函數(shù)。
2. 只要p1、p2、p3之中有一個(gè)被rejected，p的狀態(tài)就變成rejected，此時(shí)第一個(gè)被reject的實(shí)例的返回值，會(huì)傳遞給p的回調(diào)函數(shù)。

但是，這里有個(gè)需要注意的細(xì)節(jié)！

如果作為參數(shù)的 Promise

實(shí)例，自己定義了catch方法，那么它一旦被rejected，并不會(huì)觸發(fā)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('報(bào)錯(cuò)了');
})
.then(result => result)
.catch(e => e);

Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
// ["hello", Error: 報(bào)錯(cuò)了]

上面代碼中，p1會(huì)resolved，p2首先會(huì)rejected，但是p2有自己的catch方法，該方法返回的是一個(gè)新的 Promise 實(shí)例，p2指向的實(shí)際上是這個(gè)實(shí)例。該實(shí)例執(zhí)行完catch方法后，也會(huì)變成resolved，導(dǎo)致Promise.all()方法參數(shù)里面的兩個(gè)實(shí)例都會(huì)resolved，因此會(huì)調(diào)用then方法指定的回調(diào)函數(shù)，而不會(huì)調(diào)用catch方法指定的回調(diào)函數(shù)。

如果p2沒有自己的catch方法，就會(huì)調(diào)用Promise.all()的catch方法。

then方法也會(huì)把所有異步操作的結(jié)果放進(jìn)一個(gè)數(shù)組中傳給then，就是下面的results。

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

附：promise.all的異步用法

    const promise1 = Promise.resolve(3);
    const promise2 = 42;
    const promise3 = new Promise((resolve, reject) => {
      setTimeout(resolve, 100, 'foo');
    });
 
    Promise.all([promise1, promise2, promise3]).then((values) => {
      console.log(values);
    });
    // expected output: Array [3, 42, "foo"]

總結(jié)

到此這篇關(guān)于ES6 Promise.all的使用方法以及其細(xì)節(jié)的文章就介紹到這了,更多相關(guān)ES6 Promise.all使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論