2020-12-08/2023-05-23

すべての非同期処理が完了した後に処理をする

今回は複数の非同期処理を行っている場合そのすべての非同期処理が完了したタイミングで処理をする方法を紹介します。

用例としてはループ内で非同期処理が実行されている場合に有効です。

ループ内で非同期処理で要素を追加し、すべて完了した後に追加した要素に対して処理を行いたい場合に便利です。

for( let i = 0 ; i < 10 ; i++ ) {
  ajax_function( i );
}

function ajax_function( count ) {
  return new Promise( (resolve) => {
    setTimeout( () => {
        resolve();
    }, 1000 * count * Math.random() );
 })
}

上記のようにループで非同期処理の関数を実行しているとします。

これでは終わるタイミングもまちまちですべての処理が終了したタイミングが把握できません。

そこで便利なのが「Promise.all()」というものです。

allで指定したPromiseがすべて完了した場合を把握することができます。

これを適応したのが以下の形です。

const arr = [];
for( let i = 0 ; i < 10 ; i++ ) {
  const func = ajax_function( i );
  arr.push( func );
}

Promise.all( arr ).then( () => {
    console.log('すべての処理が完了しました。');
} );

function ajax_function( count ) {
  return new Promise( (resolve) => {
    setTimeout( () => {
        resolve();
    }, 1000 * count * Math.random() );
 })
}

このように使用することができます。

あらかじめ配列を用意しておき、その中にPromiseオブジェクトを返す関数を格納します。

その配列をPromise.allに指定してすべて完了後のthenで受けてあげればすべての完了時に動作します。

記事の内容