参考書籍

https://amzn.to/3gsLsXp

非同期処理は敷居が高いようなイメージがあります。というわけでこの辺りを再整理しておきます。

ちなみに、以前作ったギャルゲー作成プロジェクトでは以下のように利用しています

https://github.com/jirentaicho/novel_game/blob/main/app/src/core/App.ts

canvasで画像を表示するには事前にロードしておく必要があるのですが、それを非同期処理でやっています。

あくまで私が思うに、非同期処理で重要なのは非同期処理終了のコントロールだと思います。

非同期の動きを見る

setTimeoutメソッドはJavaScriptのネイティブAPIですが、これはコールバック関数とそれを呼出すまでにかける時間を引数に取ります。

setTimeout(() => console.log("a"), 1)
setTimeout(() => console.log("b"), 1)
setTimeout(() => console.log("c"), 3)
setTimeout(() => console.log("d"), 1)
setTimeout(() => console.log("e"), 1)
setTimeout(() => console.log("f"), 1)
console.log("g")
-----------------------------------------------
"g"
"a"
"b"
"d"
"e"
"f"
"c"

ネイティブな非同期APIを呼出した時に、すぐにメインスレッドに制御が戻ります。

そのためAPIが呼び出されなかったかのように処理が進みます。

非同期処理が完了したら、JavaScriptプラットフォームは、timeoutで設定した時間が経過したら、JavaScript独自のイベントキューの中にタスク（コールバック関数）を格納します。

メインスレッドのコールスタックが空になると、イベントキューから保留中のタスクを探し、それを実行する。するとメインスレッドに制御が戻り。。。を繰り返します。

詳しい解説:https://qiita.com/l1lhu1hu1/items/57dcc7cb867eee951f36

そのため、処理が重い場合（今回で言うところのsetTimeout(() => console.log(“c”), 3))は、イベントキューに登録されるのも遅くなるようです。

なので、abcdefgの順番でコンソール出力させるには、非同期処理終了タイミングをコントロールする必要があります。

Promiseでコントロールする

安直に考えて処理順を制御してみます。

setTimeoutのコールバック関数が呼ばれるタイミングで非同期処理を実行してしまえば、完全にコントロールできます。

setTimeout( () => {
  console.log("a");
  setTimeout( () => {
    console.log("b")
    setTimeout( () => {
      console.log("c")
    },1)
  },2)
},1)
-------------
"a"
"b"
"c"

最初1ミリ秒経過した後でコンソール出力、2ミリ秒経過した後でコンソール出力、1ミリ秒経過した後でコンソール出力。

このように終了のタイミングをコントロールすればよいのです。

しかし、この難解なソースコードは管理が大変です。

もしも、2ミリ秒後に、3ミリ秒待ったあとでコンソール出力を行いたいとか、新しい要求が出たときに修正するのも大変です。

以下のような関数を定義ます

private outputlog( _callback : () => void , time: number) : Promise<void> {
    return new Promise( (resolve) => {
        setTimeout( () => {
            resolve( _callback() )
        }, time )
    });
}

これを以下のようにして利用します

public init() : void{

    this.outputlog(()=>console.log("a"),1)
        .then( () => {
            return this.outputlog(()=>console.log("b"), 2);
        })
        .then( () => {
            return this.outputlog(()=>console.log("c"),1);
        })

結果は以下のようになります

順番通りにログが出力されています。

then()を使うことで非同期処理が完了したときの処理をチェーンで書くことができます。この時に、thenに渡すのはコールバック関数です。

Promiseを取得して、Promiseチェーンを作れば複数の処理のタイミングをコントロールできます。

毎回、resolveされたPromiseを返却していますので、処理が正常に完了したらthenを呼ぶことになり、順番通りに動いています。

returnしない場合は想定通りに動きません。例えば以下の場合

this.outputlog(()=>console.log("a"),1)
    .then( () => {
        this.outputlog(()=>console.log("b"), 2);
    })
    .then( () => {
        this.outputlog(()=>console.log("c"),1);
    })

最初のaを出力する非同期処理が完了したら、bを出力する処理が流れて、そのままcを出力する処理が流れるので、cの出力処理はaの非同期処理が完了したときに反応してしまいます。

bの結果をpromiseで返すことで、bの非同期処理が完了したらcを出力するということができます。

なので以下は想定通りに動きます

this.outputlog(()=>console.log("a"),1)
    .then( () => {
        return this.outputlog(()=>console.log("b"), 2);
    })
    .then( () => {
        this.outputlog(()=>console.log("c"),1);
    })

async/await

promiseをもっと便利に扱うためにasync/awaitがあります。

これを使うとthenですら省略することができます。

private async log(): Promise<void>{
        await this.outputlog(()=>console.log("a"),1);
        await this.outputlog(()=>console.log("b"),2);
        await this.outputlog(()=>console.log("c"),1);
        await this.outputlog(()=>console.log("d"),3);
        await this.outputlog(()=>console.log("e"),1);
    }

    public init() : void{

        this.log();

awaitはasyncがついたメソッドの中でしか使うことができません。

awaitを使うことでthenを使うよりシンプルで分かりやすく、非同期処理終了をコントロールできています。

TypeScriptの非同期処理を学ぶ