Skip to content

Latest commit

 

History

History
47 lines (34 loc) · 2.29 KB

promise-race.adoc

File metadata and controls

47 lines (34 loc) · 2.29 KB

Promise.race

Promise.all と同様に複数のpromiseオブジェクトを扱うPromise.raceを見てみましょう。

使い方はPromise.allと同様で、promiseオブジェクトの配列を引数に渡します。

Promise.all は、渡した全てのpromiseがFulfilled または Rejectedになるまで次の処理を待ちましたが、 Promise.race は、どれか一つでもpromiseがFulfilled または Rejectedになったら次の処理を実行します。

Promise.allのときと同じく、タイマーを使った Promise.race の例を見てみましょう。

promise-race-timer.js
link:embed/embed-promise-race-timer.js[role=include]

上記のコードだと、1ms後、32ms後、64ms後、128ms後にそれぞれpromiseオブジェクトがFulfilledとなりますが、 一番最初に1msのものがFulfilledとなった時点で、.then が呼ばれます。 また、resolve(1) が呼ばれるため value に渡される値も1となります。

最初にFulfilledとなったpromiseオブジェクト以外は、その後呼ばれているのかを見てみましょう。

promise-race-other.js
link:embed/embed-promise-race-other.js[role=include]

先ほどのコードに console.log をそれぞれ追加しただけの内容となっています。

実行してみると、winner/loser どちらも setTimeout の中身が実行されて console.log がそれぞれ出力されていることがわかります。

つまり、Promise.raceでは、 一番最初のpromiseオブジェクトがFulfilledとなっても、他のpromiseがキャンセルされるわけでは無いということがわかります。

Note
ES Promisesの仕様には、キャンセルという概念はありません。 必ず、resolve or rejectによる状態の解決が起こることが前提となっています。 つまり、状態が固定されてしまうかもしれない処理には不向きであるといえます。 ライブラリによってはキャンセルを行う仕組みが用意されている場合があります。