RareJob Tech Blog

レアジョブテクノロジーズのエンジニア・デザイナーによる技術ブログです

4種のPromiseメソッドの違いについて

Frontend

長引くコロナ禍の中、お家時間をより充実したものにするために社内開発メンバーの皆さんにオススメ家電を聞いたり実際の使用感の伺ったりできるslackチャンネルを作ったことが上半期の自身の業務成果かなと思っているフロントエンドエンジニアの田原です。 ＼(^o^)／（お仕事もしてます）

生活スタイルが皆さん異なるのでオススメ家電や感想等が違い色んな生の意見をもらえるので新しい発見もあり、まだまだリモートワークが続く中で比較的どんな人でも （家電は誰でもつかうと思うので）参加しやすい話題な気もしているのでコミュニケーションの一助にもなっていたら良いなと思ったりしております。

チームリーダーオススメのNature Remoはこの夏に購入して（というかこれ書いてる時にポチった）色んな家電をより使いやすくしたいなと画策しており、先行予約で手に入れたAladdin Connectorはまだ開封すらしていませんが、そろそろNintendo Switchと接続して夏のお家時間をより充実させたものにしたいなと思っております。

お話かわりまして、ES2021で追加予定の新しいメソッドのanyも含めてPromiseの静的メソッドについて違いや使い所等について今回は触れていきたいなと思います。

※尚、JavaScriptにおける非同期処理についてやPromiseの概要、await/async等については世の中に良い記事が溢れているので説明は割愛させて頂きます。

目次

4つの静的メソッド

1つの非同期処理についてはawait/asyncを使うことが多くなってきたかと思いますが、複数処理を扱う際のメソッドとして実験的なanyを含めて4つの静的メソッドが存在しており、これらを適所で使うことで非同期処理のハンドリングをよりパフォーマンスの良いものにすることが可能になります。

Promise.all

非同期処理を並列で同時実行しすべての非同期処理が解決（正常終了）するか、同時実行の内の1つでも拒否（Error等）されるまで待ちます。

【人で例えると】
約束の内容は全部守ろうとしてくれる義理堅い人（おそらく）

e.g.

async function all() {
  const first = new Promise((resolve, reject) => {
    setTimeout(() => resolve('1秒後に処理が完了'),1000)
  })
  const second = new Promise((resolve, reject) => {
    setTimeout(() => resolve('10秒後に処理が完了'),10000)
  })
  const result = await Promise.all([first, second]).catch((e) => cosole.info('error', e))
  if (result) {
    console.info('success', result)
  }
}
all()

【使い所】
複数のエンドポイントに並列的にrequestを投げ、全てのresponseが正常でない場合はerrorハンドリングする場合等

Promise.allSettled

非同期処理を並列で同時実行しすべての非同期処理が解決or拒否されるまで待ちます。

allは1つでも非同期処理がrejectされると途中まで走っていた別の処理の状況は無視して処理を止めてしまいますが、allSettledは各処理がどちらの 処理になろうとも設定された内容を返すまで待ちます。

ただし、rejectを行ってもcatch節に入らず(その為、allSettledの場合、catchは書かなくて良い)に必ず値が返り、 返ってくる値の内容も特殊で以下のようなobjectの形で返却されます。

{status: "fulfilled", value: xxxx } or
{status: "rejected", reason: xxxx }

【人で例えると】
上手くいっても失敗しても最後まで約束したことはこなそうとしてくれる義理堅い人（きっと）

e.g.

async function allSettled() {
  const first = new Promise((resolve, reject) => {
    setTimeout(() => resolve('1秒後に処理が完了'),1000)
  })
  const second = new Promise((resolve, reject) => {
    setTimeout(() => resolve('10秒後に処理が完了'),10000)
  })
  const result = await Promise.allSettled([first, second])
  console.info('success', result)
}
allSettled()

【使い所】
複数のエンドポイントに並行的にrequestを投げるが、各responseの状態次第で振る舞いを変えたいとき等

Promise.race

非同期処理を並列で同時実行しどれか1つが解決or拒否されるまで待ちます。 拒否時はall同じになりますが、allと違うのは1つでも解決した場合はすぐに処理が終わるところです。

以下の例ではfirstが解決であっても拒否であっても必ず先に処理が走る為(1000msなので10000msより早い)、secondの処理は待たれることはありません。 番外編で後述しておりますが単体よりも組み合わせて使う際に効果を発揮する気がしております。

【人で例えると】
できる約束の内容を最速で対応してくれる義理堅い人（だと思う）

e.g.

async function race() {
  const first = new Promise((resolve, reject) => {
    setTimeout(() => resolve('1秒後に処理が完了'),1000)
  })
  const second = new Promise((resolve, reject) => {
    setTimeout(() => resolve('10秒後に処理が完了'),10000)
  })
  const result = await Promise.race([first, second]).catch((e) => console.info('error', e))
  if(result){
    console.info('success', result)
  }
}
race()

【使い所】
複数のエンドポイントに並行的にrequestを投げ、一番早く処理される内容次第でハンドリングしたい時等

Promise.any

ES2021に実装される実験的メソッドであり、1つでも解決した時点で終了します。 raceと似ていますが、raceは解決であっても拒否であってもであったのに対し、1つが解決しなくても他のものが解決すればその処理が終わるまで待ちます。 その為、全ての処理が拒否された時にのみcatch節に入ります。

【人で例えると】
約束が全部こなせないとわかるまで投げ出さない義理堅い人（多分）

e.g.

async function any() {
  const first = new Promise((resolve, reject) => {
    setTimeout(() => resolve('1秒後に処理が完了'),1000)
  })
  const second = new Promise((resolve, reject) => {
    setTimeout(() => resolve('10秒後に処理が完了'),10000)
  })
  const result = await Promise.any([first, second]).catch((e) => console.info('error', e))
  if(result){
    console.info('success', result)
  }
}
any()

【使い所】
並行的にrequestを投げた結果、全て拒否されるまではハンドリングするのを待ちたい＆全部揃ってなくても返されるresponseだけで良い場合等

番外編

ちなみにここまで説明した各メソッドで他のメソッドをラップして実行を待つこともできます。

e.g.

async function allRace() {
  const first = new Promise((resolve, reject) => {
    setTimeout(() => resolve('1秒後に処理が完了'),1000)
  })
  const second = new Promise((resolve, reject) => {
    setTimeout(() => resolve('10秒後に処理が完了'),10000)
  })

  const result = await Promise.all([
    Promise.race([first, second]),
    Promise.race([first, second])
  ]).catch((e) => console.info('error', e))
  if(result){
    console.info('success', result)
  }
}
allRace()
  • この場合all->raceの処理となり：1秒後にfirstが2回raceとして返され、全ての値が返った状態のallとして配列が返ります。
  • その他、all->rase,allSettledの処理等もできるので組み合わせ次第で色んな待ち方ができそうです。

まとめ

各Promiseメソッドは人に例えるとみんな義理堅い人だったことがわかり.....

弊社フロントエンドではNuxtの機能であるserverMiddlewareを使ってBFFを導入しており、BFFサーバーの実装の中でAPIへのrequest処理をいい感じにしたい部分があったので色々と調べた結果、anyメソッドの登場もあったので（anyについては知らなかったので）備忘録も兼ねて書きました。 改めて色々と調べたりしたのでPromise完全に理解した（してない。でも少しは理解が深まった。）気がします。

弊社内のフロントの構成は以下スライドに内容記載しておりますのでご興味あればご一読頂けると嬉しいです。

参考