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