[JavaScript, TypeScript] async/awaitで非同期処理を同期処理のように順番に実行する

javascriptって非同期での処理が多いため、上に書いてある処理が終わったら次の処理にいくといった具合に実行されるわけではないというのを最近知りました。実際にこれではまったときがありました。

しかし、asyncとawaitを使用すると簡単に同期処理っぽく順番に処理させることができます。

まずは順番通りに行かない例

こんな感じです。

const example1 = () => {
 setTimeout(()=>{
   console.log("example1")
 }, 1000)
}

const example2 = () => {
 console.log("example2")
}

const example3 = () => {
 console.log("example3")
}
example1()
example2()
example3()

期待としてはexample1が1秒後にコンソールに表示され、続けてexample2,3が表示されるようにしたいです。しかしながら、結果は以下です。

//実行結果
$ example2
$ example3
$ example1

これがjavascriptの難しいところですね。

順番通りに表示させる

async/awaitを使用して順番通りに表示させます。

const execute = async() => {
 const example1 = () => {
   return new Promise((resolve, reject)=>{
     setTimeout(()=>{
       console.log("example1")
       resolve();
     }, 1000)
   })
 }

 const example2 = () => {
   console.log("example2")
 }

 const example3 = () => {
   console.log("example3")
 }

 await example1()
 example2()
 example3()
}

execute()

こんな感じに書くと

//実行結果
$ example1
$ example2
$ example3

となります。

async関数を定義して、その中で処理終了待ちしたい関数をPromiseオブジェクトを返すようにします。

あとはその関数にawaitを使えば指定した関数の処理が終了するまで他の処理は走らなくなります。

まとめ

javascriptは本当に難しい。