はじめに

JavaScript(ES6)のPromiseのthen、**async/await**それぞれで同じ結果を得るためのコードを比較しました。

setTimeoutのみを使ったシンプルな例で説明しています。

環境

OS: macOS Catalina 10.15.1

1.Promiseの`then`で書いたコード

先日のこの記事から転用します。

methodChain.js

function promiseOne() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('いーち')
    }, 1000) //1秒後に'いーち'という文字列を返す
  })
}

function promiseTwo() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('にーい')
    }, 1000) //1秒後に'にーい'という文字列を返す
  })
}

function promiseThree() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('さーん')
    }, 1000) //1秒後に'さーん'という文字列を返す
  })
}

//出力例
promiseOne()
  .then(one => { //ここのoneにはpromiseOneのresolveの()内にある文字列が入る
  console.log(one)
  return promiseTwo() //ここでreturnした結果が次の引数twoに入る
})
  .then(two => { //ここのtwoにはpromiseTwoのresolveの()内にある文字列が入る
    console.log(two)
    return promiseThree() //ここでreturnした結果が次の引数threeに入る
})
  .then(three => { //ここのthreeにはpromiseThreeのresolveの()内にある文字列が入る
  console.log(three)
})

↓

出力(1秒後)

いーち

出力(2秒後)

いーち
にーい

出力(3秒後)

いーち
にーい
さーん

このように、非同期処理を順番に処理出来ていました
。

ただ、returnの結果が次のthenの第一引数に入るあたりが可読性を下げていると思います。

これをasync/awaitを使って書き換えると、どの変数に何が入っているのか非常に分かりやすくなります。

では、書き換えていきましょう！

2. `async/await`で書き換えたコード

最下部にあった出力例の箇所のみasync/awaitをつかって書き換えます。

asyncAwait.js

...略

//非同期処理の順番を指示する関数を定義する
async function asyncAwait() { //必ずasync functionで始める
  const one = await promiseOne() //非同期関数にawaitをつけると、promiseOneの処理が全て完了した時点でresolveの()内がoneに入る
  console.log(one) //'いーち'
  const two = await promiseTwo() //同様にpromiseTwoの処理が全て完了した時点でresolveの()内がtwoに入る
  console.log(two) //'にーい'
  const three = await promiseThree() //同様にpromiseThreeの処理が全て完了した時点でresolveの()内がthreeに入る
  console.log(three) //'さーん'
}
  
//出力部
asyncAwait()

↓

出力(1秒後)

いーち

出力(2秒後)

いーち
にーい

出力(3秒後)

いーち
にーい
さーん

同様に処理できました。

async/awaitの方が、Promiseのthenよりもスッキリ！
コードの可読性が高くなりました！

同じ結果を得られるなら、async/awaitを選ぶべきですね。

以上です！

おわりに

最後まで読んで頂きありがとうございました

どなたかの参考になれば幸いです

参考にさせて頂いたサイト（いつもありがとうございます）