TypeScriptでPromise.all()を使う
2024-10-21
**Promise.all()**は、複数のPromiseオブジェクトを並列に実行し、それらのPromiseがすべて解決されたときに、すべての結果を配列として返す関数です。TypeScriptでも同じように使えます。
基本的な使い方
import { Promise } from 'bluebird'; // または他のPromiseライブラリ
const promise1 = new Promise<string>((resolve) => {
setTimeout(() => {
resolve('Promise 1 resolved');
}, 1000);
});
const promise2 = new Promise<number>((resolve) => {
setTimeout(() => {
resolve(2);
}, 2000);
});
Promise.all([promise1, promise2])
.then((results) => {
console.log(results); // ['Promise 1 resolved', 2]
})
.catch((error) => {
console.error(error);
});
型の指定
TypeScriptでは、Promise.all()の戻り値の型を指定することができます。各Promiseの型を指定すると、戻り値の型はそれらの型の配列になります。
Promise.all<string[] | number[]>([promise1, promise2])
.then((results: string[] | number[]) => {
// resultsの型はstring[] | number[]になります
});
エラー処理
Promise.all()は、いずれかのPromiseが拒否された場合でも、すべてのPromiseが解決されるまで待機します。拒否されたPromiseのエラーは、Promise.all()の戻り値のエラーとして渡されます。
Promise.all([promise1, Promise.reject('Error in promise 2')])
.then((results) => {
// このブロックは実行されません
})
.catch((error) => {
console.error(error); // 'Error in promise 2'
});
Promise.allSettled()
TypeScriptでは、Promise.allSettled()も使用できます。これは、すべてのPromiseが解決または拒否されたときに、各Promiseの結果のステータスと値を配列として返す関数です。
Promise.allSettled([promise1, Promise.reject('Error in promise 2')])
.then((results) => {
console.log(results); // [{ status: 'fulfilled', value: 'Promise 1 resolved' }, { status: 'rejected', reason: 'Error in promise 2' }]
});
import { Promise } from 'bluebird'; // または他のPromiseライブラリ
const promise1 = new Promise<string>((resolve) => {
setTimeout(() => {
resolve('Promise 1 resolved');
}, 1000);
});
const promise2 = new Promise<number>((resolve) => {
setTimeout(() => {
resolve(2);
}, 2000);
});
Promise.all([promise1, promise2])
.then((results) => {
console.log(results); // ['Promise 1 resolved', 2]
})
.catch((error) => {
console.error(error);
});
解説
Promiseオブジェクトを2つ作成します。それぞれ、1秒後に「Promise 1 resolved」という文字列を、2秒後に数値の2を返すように設定されています。Promise.all()にこれらのPromiseオブジェクトの配列を渡します。Promise.all()は、すべてのPromiseが解決されるまで待機します。- すべてのPromiseが解決されると、
thenブロックが実行されます。resultsには、各Promiseの解決値が配列として格納されます。 - 何かしらのエラーが発生した場合には、
catchブロックが実行されます。
Promise.all<string[] | number[]>([promise1, promise2])
.then((results: string[] | number[]) => {
// resultsの型はstring[] | number[]になります
});
Promise.all()の戻り値の型を指定しています。string[] | number[]は、配列内の要素が文字列または数値のいずれかであることを示しています。thenブロック内のresults変数も、同じ型が指定されています。これにより、TypeScriptの型チェック機能が有効になり、エラーを防ぐことができます。
Promise.all([promise1, Promise.reject('Error in promise 2')])
.then((results) => {
// このブロックは実行されません
})
.catch((error) => {
console.error(error); // 'Error in promise 2'
});
Promise.reject()を使用して、エラーを発生させるPromiseを作成しています。Promise.all()は、いずれかのPromiseが拒否された場合でも、すべてのPromiseが解決されるまで待機します。- 拒否されたPromiseのエラーは、
Promise.all()の戻り値のエラーとして渡されます。
Promise.allSettled([promise1, Promise.reject('Error in promise 2')])
.then((results) => {
console.log(results); // [{ status: 'fulfilled', value: 'Promise 1 resolved' }, { status: 'rejected', reason: 'Error in promise 2' }]
});
resultsには、各Promiseのステータス（fulfilledまたはrejected）と、解決値または拒否理由が格納されます。
Promise.race()
**Promise.race()**は、複数のPromiseオブジェクトを並列に実行し、最初に解決または拒否されたPromiseの結果を返す関数です。
Promise.race([promise1, promise2])
.then((result) => {
console.log(result); // 最初に解決されたPromiseの結果
})
.catch((error) => {
console.error(error);
});
async/await
async/await構文を使用すると、Promiseを同期的なコードのように記述することができます。
async function main() {
const results = await Promise.all([promise1, promise2]);
console.log(results);
}
main();
RxJS
RxJSは、リアクティブプログラミングのためのライブラリです。RxJSのforkJoin演算子を使用すると、複数のObservableを並列に実行し、すべてのObservableが完了したときに、それらの値を配列として返すことができます。
import { from, forkJoin } from 'rxjs';
forkJoin([from(promise1), from(promise2)])
.subscribe((results) => {
console.log(results);
});
typescript
