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による状態の解決が起こることが前提となっています。 つまり、状態が固定されてしまうかもしれない処理には不向きであるといえます。 ライブラリによってはキャンセルを行う仕組みが用意されている場合があります。 |