はじめに
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を選ぶべきですね。
以上です！
おわりに
最後まで読んで頂きありがとうございました
どなたかの参考になれば幸いです