https://idea-hack.com/courses/a-promise-event-that-is-convenient-for-implementing-asynchronous-processing-in-javascript/lessons/understand-how-to-use-the-promise-all-method-that-performs-multiple-processes-at-once-in-a-promise-object-that-implements-asynchronous-processing-with-javascript/
https://idea-hack.com/courses/a-promise-event-that-is-convenient-for-implementing-asynchronous-processing-in-javascript/lessons/understand-how-to-use-the-promise-all-method-that-performs-multiple-processes-at-once-in-a-promise-object-that-implements-asynchronous-processing-with-javascript/

JavaScriptで非同期処理を実装するPromiseオブジェクトにおいて、複数の処理を一度に行うPromise.all()メソッドの使い方を理解しよう

Promiseで複数の非同期処理を一度に行う

JavaScriptで非同期処理を行うにはPromiseを使います。

Promiseで1つの非同期処理を行う方法については本コースで述べてきました。

しかし、複数の非同期処理を一度に行いたいケースもあるでしょう。

そんな時はPromise.all()メソッドを利用します。

オブジェクト

オブジェクト意味返り値
new Promise(関数)Promiseを作成するPromiseインスタンス
resolve(引数)Promiseインスタンス内で利用され、非同期処理の終了(成功)を宣言するメソッド。Promiseインスタンス.then(関数)の関数に対して引数の値を渡すことができる。なし
reject(引数)Promiseインスタンス内で利用され、非同期処理の終了(失敗)を宣言するメソッド。Promiseインスタンス.catch(関数)の関数に対して引数の値を渡すことができる。なし
Promiseインスタンス.then(関数)成功した時のコールバック関数を呼び出し実行Promise
Promiseインスタンス.catch(関数)失敗した時のコールバック関数を呼び出し実行Promise
Promise.all(配列)複数のPromiseを並列に実行するPromise
Promiseオブジェクトの仕様

サンプルコード

サンプルコードとして、Promise.all()メソッドを使用して20個の処理を並列で非同期処理をさせ、それら全てが完了した時に「全ての処理が完了しました」という文言を出力するコードを紹介します。

処理が開始される順番と終了する順番が異なることを確認してください。非同期処理なので、これは正しい動作です。

Output
処理履歴
Pug
table.table
			tbody
				tr
					th 処理履歴
					td#targetText
		button.btn.brandia_btn#targetButton 非同期処理を開始
JavaScript
const targetText = document.getElementById("targetText");
const targetButton = document.getElementById("targetButton");


// 非同期処理をさせる関数をまとめた配列を作成します。
const arrFunc = [];

//非同期処理させたい関数を先ほどの配列に順番に追加します。今回は学習目的なのでfor文で同じ処理を何個も入れます。
for (let i = 0; i < 20; i++) {
  const func = (resolve) => {
		let additionalElement = document.createElement("div");
		additionalElement.textContent = `処理${i}を開始 ${new Date().toLocaleTimeString()}`;
		targetText.appendChild(additionalElement);
		
    // 0〜2秒ぐらいで終了判定を遅延させます。今回は学習目的なので処理と処理の感覚をバラバラにすることで、処理が終了する順番にズレが生じるようにしています。
    const delayMsec = 2000 * Math.random();

    // 遅延処理
    setTimeout(() => {
			let additionalElement = document.createElement("div");
			additionalElement.textContent = `処理${i}が完了 ${new Date().toLocaleTimeString()}`;
			targetText.appendChild(additionalElement);
      resolve();
    }, delayMsec);
  };
  // 配列に保存
  arrFunc.push(func);
}

//非同期処理開始ボタンの設置
targetButton.addEventListener( 'click', () => {
// 関数を含めた配列を、Promiseの配列に変換し、それぞれを非同期処理で開始
const arrPromise = arrFunc.map((func) => new Promise(func));
// 配列に格納された全ての非同期処理を完了した時の処理
	Promise.all(arrPromise).then(() => {
		const additionalElement = document.createElement("div");
		additionalElement.textContent = 'すべての処理が完了しました';
		targetText.appendChild(additionalElement);
	});
});
インストラクター