非同期処理のawaitの処理について

Question

現在、Redux toolkitを用いてログイン認証等を実装しているのですが、疑問に思った点があります。以下の流れがあったとします。

ユーザー登録モーダルにて情報入力後、登録ボタンが押されると、
・作成後自動でログイン
・プロフィールのテンプレートなども自動で作成
・ユーザー登録モーダルを閉じる

これらの流れはすべてasynkの中に書かれており、すべて先頭にawaitが書かれています。
この時なぜ非同期処理をする必要があるのでしょうか？上から下の処理を行っているだけなら同期処理と同じことをしていると思うのですが。

Comments

[yambejp]

async/awaitをはずして試してみましたか？

Answer 1

この時なぜ非同期処理をする必要があるのでしょうか？

通信など、ブラウザJavaScriptの枠内では非同期でしか実行できない処理も存在します。

Answer 2

JavaScriptは基本的にシングルスレッドで実行されるので、応答が帰ってくるのに時間のかかる処理を同期的に実行すると、それが終わるまでブラウザの画面が更新されないといった問題が発生します。
そういった問題を防ぐ意味で、上から下に順番に処理を行う場合でも、時間がかかる処理は非同期処理で行ったほうがよいわけです。