【JavaScript】2つの非同期関数の完了後に関数を実行する方法

2つの非同期関数を要素として持つ配列を想定してみましょう。そして、両方の非同期関数の実行が完了したタイミングで、何らかの処理(ここでは例としてコンソールへの出力)を実行したいとします。

この課題には、どのようにアプローチすればよいのでしょうか?

非同期処理の完了後にタスクを実行する方法は、基本的に次の2つがあります。

• Promise を使う方法
• async/await 関数を使う方法

しかし、複数(2つ以上)の非同期関数を扱うコードでは、前者の Promise.all() メソッドの方が後者よりも有利です。Promise.all() は、渡されたすべての Promise が解決(resolve)されるのを待ち、その結果を配列としてまとめて返してくれるためです。

コード例

以下が実際のコードです。

const arr = [
    new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('func1 fired!');
        }, 2000);
    }),
    new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('func2 fired');
        }, 3000);
    })
];
const lastFunction = () => {
    console.log('this function should be fired at the very last');
};
Promise.all([arr[0], arr[1]]).then((resp) => {
    console.log(resp);
    lastFunction();
}).catch((err) => {
    console.log('something unexpected happened');
})

仕組みの解説

上記のコードでは、まず2つの Promise を含む配列 arr を定義しています。1つ目の Promise は2秒後に、2つ目の Promise は3秒後にそれぞれ解決されるように設定されています。

Promise.all() にこれら2つの Promise を渡すことで、両方が完了するまで待機し、then() ブロック内で両方の結果を配列として受け取った後、lastFunction() が呼び出されます。

また、いずれかの Promise が拒否(reject)された場合には catch() ブロックが実行されるため、エラーハンドリングも簡単に行えます。

実行結果

このコードをコンソールで実行すると、以下のような出力が得られます。

[ 'func1 fired!', 'func2 fired' ]
this function should be fired at the very last

このように、Promise.all() を使えば、複数の非同期処理がすべて完了したことを保証しながら、その後に続く処理を確実に実行できます。3つ以上の非同期関数を扱う場合も、同じ要領で配列に追加するだけで対応可能です。