Promiseを使った非同期ループ処理の書き方について

JavaScriptで常に頭を悩ませるのが非同期処理ではないかと思います。非同期処理を幾つも実行したりすると、思ったタイミングで処理が走らないといったことが多々あります。

そんな中でループ処理になると、特に厄介ではないでしょうか。そこで今回はPromiseを使ったループ処理について紹介します。

0から10まで順番に処理をしたら抜けるループ

非同期処理でない場合は次のように書けます。

厄介なのは非同期処理時です。まず、基本形として次のようにPromiseを考えます。

この処理は一瞬で終了してしまいます。コンソールにも特に何もメッセージは出ません。この中でループ処理を行うようにします。この時、注意するのは非同期処理がターゲットと言うことです。そのため、loop関数の中でもPromiseを使って処理を行うようにして、処理順番を保証します。

これにより、非同期処理（setTimeout）が実行された後、resolveが実行されるようになります。後は内側のPromiseについて、then処理を書きます。

thenの中で処理判定を行い、ループを抜けるかどうかの判定を行っています。これで非同期処理における処理順番の保証と、処理完了時に次の処理につながる部分ができました。

JavaScriptにおける非同期処理のループはかなり面倒であるというのが分かるかと思います。JSDoc: Namespace: asyncを使うと非同期処理におけるループがこれくらい分かりやすく書けるようになります。以下は処理を5回繰り返すという指定です。