はじめに

同期処理、非同期処理がよくわからない時に書いていたコードで、同期処理を多用していて、
パフォーマンスを不必要に下げていました(低レベル)
今は少しレベルアップしたので記録しておきます。
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
}

これでもいいみたいです。
こちらの方がスッキリ収まっていて、気持ちいいですね