はじめに

お久しぶり。また投稿をしに来ました。
最近はずっっっっっとbackendの開発をやっていて、frontendはもう忘れちゃう気がします。土日にelectron+reactでデスクトップアプリを開発してみて、frontendの知識も忘れない…かな？
さて、本題ですが、Promise.all()について皆さんはご存じでしょうか。複数のpromiseをまとめて実行する便利なメソッドですが、以前私は誤っていた書き方で大変なデバッグをしたのです。

正常例

まずは下記のソースコード：

const promise1 = new Promise((resolve, reject) => {
  console.log("p1");
  resolve(1);
})
const promise2 = new Promise((resolve, reject) => {
  console.log("p2");
  resolve(2);
})
const promise3 = new Promise((resolve, reject) => {
  console.log("p3");
  resolve(3);
});

Promise.all([promise1, promise2, promise3]).then((result) => {
  console.log(result);
});
// Expected output:
// p1
// p2
// p3
// Array [1, 2, 3]

すべてのpromiseを順番に実行し、各promiseはコンソールにログを出力し、最後にPromise.all()もログを出力します。

異常例

次に悪い書き方を示します。

const promise1 = new Promise((resolve, reject) => {
  console.log("p1");
  resolve(1);
})
const promise2 = new Promise((resolve, reject) => {
  console.log("p2");
  resolve(2);
})
const promise3 = new Promise((resolve, reject) => {
  console.log("p3");
  resolve; // ここが区別
});

Promise.all([promise1, promise2, promise3]).then((result) => {
  console.log(result);
}).catch((error) => {
  console.log("failed");
});

上記のコードを実行してみたら、各promiseは問題なくログを出力するけど、Promise.all()は配列もfailedも、結果を返さなくなります。つまり、上記の書き方ではPromise.all()から結果を取得できません。

結論

Promiseを書く際に、カッコ抜きのresolveをやめてください。返したい値がなくても、resolve()を書いてください、これも、Promise.all()のためです（笑）。