ES6のpromise.allの使い方は何ですか？

2年 ago
光, 明
1 minute

ES6のPromise.allは、複数のPromiseオブジェクトを並行して処理するための静的メソッドです。引数としてPromiseオブジェクトの配列を受け取り、新しいPromiseオブジェクトを返します。

Promise.allは、すべてのPromiseオブジェクトがresolved状態になるまで待ち、戻り値のPromiseオブジェクトのresolveコールバック関数の引数は、すべてのPromiseオブジェクトの結果を含む配列になります。その中のいずれかのPromiseオブジェクトがrejected状態になった場合、戻り値のPromiseオブジェクトのrejectコールバック関数が直ちに呼び出され、rejected状態になった最初のPromiseオブジェクトのエラー情報が渡されます。

以下はサンプルコードです：

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); // [3, 42, 'foo']
  })
  .catch(error => {
    console.error(error);
  });

上記の例では、promise1とpromise2はすでに解決済みのPromiseオブジェクトであり、promise3は100ms後に解決状態になるPromiseオブジェクトです。Promise.allはすべてのPromiseオブジェクトが解決状態になるまで待ち、新しいPromiseオブジェクトを返し、すべての結果を配列形式でresolveコールバック関数に渡します。この例では、values配列にはpromise1、promise2、promise3の結果が含まれており、つまり[3、42、’foo’]です。

もし、そのうちのどれか1つのPromiseオブジェクトがrejected状態になった場合、次のようになります。

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(reject, 100, 'Error');
});

Promise.all([promise1, promise2, promise3])
  .then(values => {
    console.log(values);
  })
  .catch(error => {
    console.error(error); // Error
  });

この例では、promise3は100ms後にrejected状態になり、Promise.allは直ちに新しいPromiseオブジェクトを返し、promise3のエラー情報をrejectコールバック関数に渡します。そのため、catchコールバック関数が実行され、”Error”が出力されます。

bannerAds