アルパカログ

JavaScript/TypeScriptで何秒後かに実行したい待機処理がある場合は setTimeout() を使うのが定石です。

しかし、ユースケースによっては setTimeout() のように「待つ」という動作を非同期実行のプロミスチェインに組み込みたいときがあります。

そこでこの記事では、待機処理をPromiseチェインを使って実装する方法を紹介します。

Promiseは初期化時にコンストラクタとなる関数を引数に取ります。この関数は第1引数に resolve 関数を、第2引数に reject 関数を受け取ります。これらの関数名は実際には何でも良いですが、ここでは便宜上 resolve と reject とします。

resolve はPromiseを解決する際に、reject はPromiseを拒否する際に呼び出します。ここでは省略しますが、詳細は下記のページをご覧ください。

• Promise() コンストラクター - MDN

重要なのは resolve ないしは reject が呼び出されるまでPromiseの処理は遅延されるということです。この性質を利用し setTimeout() によって遅延実行される関数内で resolve を呼び出すことでPromiseを使って待機処理を実現することができます。

例えば、何らかの処理の前に1秒（1000ミリ秒）待機したい場合のコードは次のようになります。

let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    // do something
    resolve()
  }, 1000)
})
await promise

例えば、1秒待機してキーをタイプ、また1秒待機してキーをタイプするというような複数の待機を含む処理を考えてみます。

Promiseはご存知通り Promise.prototype.then() を使ってチェインすることができます。then() メソッドは、引数に取る関数の戻り値の種類や状態によって挙動を変えるという少し複雑な性質を持っています。ここでは説明は省略しますので気になる方は下記のページを参照してください。

• Promise.prototype.then() - MDN

先に挙げた setTimeout() を使った待機処理をチェインしたい場合には then() の関数内で先ほど紹介したのと同様のPromiseを新たに定義して戻り値とします。

実際にコードを見ていただいた方が早いでしょう。

let promise = promise.then(() => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // do something
      resolve()
    }, 1000)
  })
})
await promise

以上です。この記事では待機処理をPromiseチェインを使って実装する方法を紹介しました。