複数の非同期処理の統合 | Promise.allとPromise.race | JavaScript 超完全入門 基本から発展までのすべて

スポンサーリンク
スポンサーリンク

複数の非同期処理を統合するには?

JavaScriptで複数の非同期処理を統合して管理する場合、Promise.allPromise.raceというメソッドを使うことができます。これらのメソッドを使うことで、複数の非同期処理がすべて完了するのを待ったり、最初に完了した非同期処理の結果を取得したりすることができます。

Promise.allとは?

Promise.allは、複数の非同期処理がすべて完了するのを待ち、その結果を一度に取得するためのメソッドです。全てのPromiseが成功すると、結果が配列として返されますが、どれか一つでも失敗した場合は、catchが呼ばれます。

Promise.allの使用例

const promise1 = new Promise(function(resolve) {
    setTimeout(function() {
        resolve("データ1取得完了");
    }, 1000);
});

const promise2 = new Promise(function(resolve) {
    setTimeout(function() {
        resolve("データ2取得完了");
    }, 2000);
});

const promise3 = new Promise(function(resolve) {
    setTimeout(function() {
        resolve("データ3取得完了");
    }, 3000);
});

Promise.all([promise1, promise2, promise3])
    .then(function(results) {
        console.log(results); // ["データ1取得完了", "データ2取得完了", "データ3取得完了"] が出力される
    })
    .catch(function(error) {
        console.error(error);
    });

この例では、3つの非同期処理がすべて完了した後にthenが呼ばれ、結果として各処理の結果が配列で返されます。

Promise.raceとは?

Promise.raceは、複数の非同期処理のうち、最初に完了したものだけを処理します。最初に完了したPromiseが成功すればthenが実行され、失敗すればcatchが実行されます。

Promise.raceの使用例

const promise1 = new Promise(function(resolve) {
    setTimeout(function() {
        resolve("データ1取得完了");
    }, 1000);
});

const promise2 = new Promise(function(resolve) {
    setTimeout(function() {
        resolve("データ2取得完了");
    }, 2000);
});

const promise3 = new Promise(function(resolve) {
    setTimeout(function() {
        resolve("データ3取得完了");
    }, 3000);
});

Promise.race([promise1, promise2, promise3])
    .then(function(result) {
        console.log(result); // 最初に完了した "データ1取得完了" が出力される
    })
    .catch(function(error) {
        console.error(error);
    });

この例では、最初に完了したpromise1の結果がthenで処理されます。残りのPromiseは実行されますが、最初の結果が得られた時点で他の結果は無視されます。

Promise.allとPromise.raceの違い

以下にPromise.allPromise.raceの違いをまとめた表を示します。

特徴 Promise.all Promise.race
処理の終了タイミング すべての非同期処理が完了したとき 最初の非同期処理が完了したとき
成功・失敗の扱い 全ての非同期処理が成功したときのみ成功 最初に完了した非同期処理が成功なら成功、失敗なら失敗
結果 結果は配列で返される 最初に完了したPromiseの結果だけが返される

Promise.allSettledとは?

最近のJavaScriptでは、Promise.allSettledという新しいメソッドも追加されました。このメソッドは、すべての非同期処理が完了するまで待ち、成功・失敗に関係なく全ての結果を取得できます。

Promise.allSettledの使用例

const promise1 = new Promise(function(resolve) {
    setTimeout(function() {
        resolve("データ1取得完了");
    }, 1000);
});

const promise2 = new Promise(function(resolve, reject) {
    setTimeout(function() {
        reject("データ2取得失敗");
    }, 2000);
});

Promise.allSettled([promise1, promise2])
    .then(function(results) {
        console.log(results); 
        // [{status: "fulfilled", value: "データ1取得完了"}, {status: "rejected", reason: "データ2取得失敗"}]
    });

この例では、すべての非同期処理が完了した後、各Promiseの結果がfulfilled(成功)かrejected(失敗)かのステータスとともに返されます。

まとめ

複数の非同期処理をまとめて管理するために、Promise.allPromise.raceを使うと便利です。Promise.allはすべての非同期処理が完了するまで待ち、結果を一括して取得するのに適しています。一方、Promise.raceは最初に完了した非同期処理の結果を取得し、迅速なレスポンスが必要な場合に役立ちます。さらに、Promise.allSettledは、成功・失敗に関係なく全ての結果を取得したいときに使用できます。