タスクの完了管理 | Promise.allとPromise.race | JavaScript 超完全入門 基本から発展までのすべて

現在作成中です。今後加筆修正してまいります。
スポンサーリンク
スポンサーリンク

タスクの完了管理とは?

非同期処理が複数ある場合、どのタスクがいつ完了するか、全てのタスクが完了したかなどを管理することが重要です。JavaScriptのPromiseを使うことで、非同期タスクの完了状態を効率的に管理することができます。特に、Promise.allPromise.raceは複数の非同期タスクを扱う際に役立ちます。

Promise.allによるすべてのタスクの完了管理

Promise.allは、すべてのPromiseが完了するのを待ち、その結果をまとめて処理します。すべての非同期タスクが完了したときに、その結果を配列として取得できるため、複数のタスクを並行して実行しつつも、全体の進行を管理できます。

Promise.allの使用例

const task1 = new Promise(function(resolve) {
    setTimeout(function() {
        resolve("タスク1完了");
    }, 1000);
});

const task2 = new Promise(function(resolve) {
    setTimeout(function() {
        resolve("タスク2完了");
    }, 2000);
});

const task3 = new Promise(function(resolve) {
    setTimeout(function() {
        resolve("タスク3完了");
    }, 3000);
});

Promise.all([task1, task2, task3])
    .then(function(results) {
        console.log(results); // ["タスク1完了", "タスク2完了", "タスク3完了"]
    })
    .catch(function(error) {
        console.error("エラー発生:", error);
    });

この例では、3つの非同期タスクがすべて完了したときにthenが実行され、結果としてすべてのタスクの完了メッセージが配列で返されます。

Promise.raceによる最初に完了したタスクの管理

Promise.raceは、複数のPromiseの中で最初に完了したものを処理します。全てのタスクが完了するのを待つのではなく、最初に完了したタスクの結果に応じて次の処理を行いたい場合に適しています。

Promise.raceの使用例

const task1 = new Promise(function(resolve) {
    setTimeout(function() {
        resolve("タスク1完了");
    }, 1000);
});

const task2 = new Promise(function(resolve) {
    setTimeout(function() {
        resolve("タスク2完了");
    }, 2000);
});

const task3 = new Promise(function(resolve) {
    setTimeout(function() {
        resolve("タスク3完了");
    }, 3000);
});

Promise.race([task1, task2, task3])
    .then(function(result) {
        console.log(result); // 最初に完了した "タスク1完了" が出力される
    })
    .catch(function(error) {
        console.error("エラー発生:", error);
    });

この例では、最初に完了したtask1の結果が出力され、残りのタスクが完了するのを待たずに処理が進行します。

タスクの完了状況を管理するための選択肢

以下に、Promise.allPromise.raceを使ってタスクの完了状況を管理する際の違いを表で示します。

メソッド 説明 使用する場面
Promise.all すべての非同期タスクが完了するまで待つ。 複数の非同期タスクが全て完了した後に、まとめて処理したいとき。
Promise.race 最初に完了したタスクの結果のみを処理する。 複数のタスクのうち、最初に完了した結果に基づいて次の処理を進めたいとき。

タスクの成功・失敗を管理する

Promise.allは、すべてのタスクが成功した場合のみthenが実行され、どれか1つでも失敗するとcatchが実行されます。一方で、Promise.allSettledというメソッドを使うと、全てのタスクが完了した後に、成功・失敗を含めた全ての結果を取得することができます。

Promise.allSettledの使用例

const task1 = new Promise(function(resolve) {
    setTimeout(function() {
        resolve("タスク1成功");
    }, 1000);
});

const task2 = new Promise(function(resolve, reject) {
    setTimeout(function() {
        reject("タスク2失敗");
    }, 2000);
});

Promise.allSettled([task1, task2])
    .then(function(results) {
        console.log(results); 
        // [{status: "fulfilled", value: "タスク1成功"}, {status: "rejected", reason: "タスク2失敗"}]
    });

この例では、task1が成功し、task2が失敗していますが、全ての結果がthenで処理されます。fulfilledは成功、rejectedは失敗を示します。

まとめ

非同期処理におけるタスクの完了管理は、Promise.allPromise.raceを使うことで効率的に行えます。すべてのタスクが完了した後にまとめて処理したい場合はPromise.all、最初に完了したタスクの結果に基づいて処理を進めたい場合はPromise.raceを使います。また、タスクが成功・失敗した場合でも全ての結果を管理したい場合はPromise.allSettledが便利です。

Amazonロゴ
   
ad.価格範囲を指定して商品を探せます。セールで助かる便利ツール
超完全入門
スポンサーリンク
このページをメモ、または、シェア