Promiseを使った非同期プログラミングの基本

みなさん非同期プログラミング、エンジョイしてますか？

JavaScriptをやっていく上では欠かせない非同期プログラミングの最重要オブジェクト、Promiseをどれくらい使いこなせているでしょうか？

Promiseはいわゆるラッパーオブジェクトで、Promiseなオブジェクトが何を表すかというと非同期な値そのものを表しています。今まで、非同期な処理を複数使うと、コールバック地獄になっていた部分が、関数のような取り回しの悪いものではなく、非同期な値を複数使うだけといういたってシンプルな扱いになります。

コールバックスタイルのものをPromiseにするには、Promiseオブジェクトのコンストラクタを利用します。
型は難しいですが、だいたい以下のパターンになるので、あまり難しく考えなくて大丈夫です。

今までのコールバックと同じように、thenにコールバック関数を渡すことで実行します。ただし、コールバックと違うのは、好きなタイミングでコールバック関数を実行することができる点です。

thenの第一引数はresolve時のコールバック、第二引数はreject時のコールバックになります。(第二引数は省略できます)

thenに渡した関数は、Promiseオブジェクトの内部の状態によって呼び出されるタイミングが決まります。resolveが先に呼ばれていたならthenの第一引数が呼ばれて、rejectが呼ばれた場合は第二引数の関数が呼ばれます。もしどちらも呼ばれていない場合、resolveかrejectのどちらかが呼ばれるまで待機し、先に呼ばれた方のコールバックが実行されます。

thenメソッドは戻り値としてPromiseを返します。もし渡したコールバックの戻り値がPromiseなら同じ型のPromise、Promise出ない場合はそれをPromiseでラップしたものを返します。thenがPromiseを返すおかげでthen(...).then(...)といったメソッドチェーンが実現できるようになります。

ここまでの知識で、非同期の順次実行と並列実行を書くスキルはすでに身についているはずです。以下が実際の直列実行と並列実行のサンプルになります。