はじめに
同期処理、非同期処理がよくわからない時に書いていたコードで、同期処理を多用していて、
パフォーマンスを不必要に下げていました(低レベル)
今は少しレベルアップしたので記録しておきます。
JS初心者で、奇跡的に自分と同じレベルだった人が救われれば本望です。
また、なにか他にいい考え方、あれば教えて欲しいです！
そして結論
タイトル通りなのですが、
main.js
getUserData = async() => {
const user = await Backend.getUser()
const followers = await Backend.getUserFollowers(user)
const comments = await Backend.getComments(user)
}
これだと、getUserをしたあと、
getUserFollowersをして、その処理が終わった後に
getCommentsを実行します。
なので、
main.js
getUserData = async() => {
const user = await Backend.getUser()
const [followers, comments] = await Promise.all(
[Backend.getUserFollowers(user), Backend.getComments(user)]
)
}
or
getUserData = async() => {
const user = await Backend.getUser()
const promiseFollowers = Backend.getUserFollowers(user)
const promiseComments = Backend.getComments(user)
const [followers, comments] = await Promise.all([promiseFollowers, promiseComments])
}
こうすると、
Backend.getUserFollowersと、
Backend.getCommentsは非同期で実行されて、
await Promise.allで、二つの処理が終わってから回収されます！
発火は非同期、回収は同期
ですね！
追記(rithmety様より)
main.js
getUserData = async() => {
const user = await Backend.getUser()
const follower$ = Backend.getUserFollowers(user)
const comment$ = Backend.getComments(user)
const followers = await follower$
const comment$ = await comments
}
これでもいいみたいです。
こちらの方がスッキリ収まっていて、気持ちいいですね