JavaScript Promise.all()

概要: このチュートリアルでは、Promise.all()静的メソッドを使用して、複数の非同期操作の結果を集約する方法を学習します。

JavaScript Promise.all()メソッドの紹介

Promise.all()静的メソッドは、イテラブルなPromiseを受け取ります。

Promise.all(iterable);Code language: JavaScript (javascript)

Promise.all()メソッドは、すべての入力Promiseが解決されたときに解決される単一のPromiseを返します。返されたPromiseは、入力Promiseの結果の配列に解決されます。

この図では、promise1はt1で値v1に解決され、promise2はt2で値v2に解決されます。したがって、Promise.all(promise1, promise2)は、t2でpromise1とpromise2の結果を含む配列[v1, v2]に解決されるPromiseを返します。

言い換えれば、Promise.all()はすべての入力Promiseが解決されるのを待ち、入力Promiseの結果を含む配列に解決される新しいPromiseを返します。

入力Promiseのいずれかが拒否された場合、Promise.all()メソッドは、最初に拒否されたPromiseのエラーで拒否されたPromiseをすぐに返します。

この図では、promise2はt1でerrorで拒否されます。したがって、Promise.all()は、同じエラーですぐに拒否される新しいPromiseを返します。また、Promise.all()は、他の入力Promiseが解決されるか拒否されるかに関係なく、気にしません。

実際には、Promise.all()は複数の非同期操作の結果を集約するのに役立ちます。

JavaScript Promise.all()メソッドの例

Promise.all()メソッドの動作を理解するために、いくつかの例を見てみましょう。

1) 解決されたPromiseの例

次のPromiseは、1秒、2秒、3秒後に10、20、30に解決されます。非同期操作をシミュレートするために、setTimeout()を使用します。

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('The first promise has resolved');
    resolve(10);
  }, 1 * 1000);
});
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('The second promise has resolved');
    resolve(20);
  }, 2 * 1000);
});
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('The third promise has resolved');
    resolve(30);
  }, 3 * 1000);
});

Promise.all([p1, p2, p3]).then((results) => {
  const total = results.reduce((p, c) => p + c);

  console.log(`Results: ${results}`);
  console.log(`Total: ${total}`);
});
Code language: JavaScript (javascript)

出力

The first promise has resolved
The second promise has resolved
The third promise has resolved
Results: 10,20,30
Total: 60

すべてのPromiseが解決されると、これらのPromiseの値は、配列としてthen()メソッドのコールバックに渡されます。

コールバック内では、配列のreduce()メソッドを使用して合計値を計算し、console.logを使用して値の配列と合計を表示します。

2) 拒否されたPromiseの例

入力Promiseのいずれかが拒否された場合、Promise.all()は拒否されたPromiseを返します。

const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('The first promise has resolved');
        resolve(10);
    }, 1 * 1000);

});
const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('The second promise has rejected');
        reject('Failed');
    }, 2 * 1000);
});
const p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('The third promise has resolved');
        resolve(30);
    }, 3 * 1000);
});


Promise.all([p1, p2, p3])
    .then(console.log) // never execute
    .catch(console.log);
Code language: JavaScript (javascript)

出力

The first promise has resolved
The second promise has rejected
Failed
The third promise has resolved

この例では、3つのPromiseがあります。1つ目は1秒後に解決され、2つ目は2秒後に拒否され、3つ目は3秒後に解決されます。

結果として、2番目のPromiseが拒否されたため、返されたPromiseは拒否されます。拒否されたPromiseの理由を表示するために、catch()メソッドが実行されます。

まとめ

• Promise.all()メソッドは、Promiseのリストを受け取り、すべての入力Promiseが解決された場合は入力Promiseの結果の配列に解決されるか、最初に拒否されたPromiseのエラーで拒否される新しいPromiseを返します。
• 複数の非同期操作の結果を集約するには、Promise.all()メソッドを使用します。

クイズ