非同期処理について
非同期処理について
プログラムは実行すると、コードを上から順に1行ずつ実行していきますね。
その処理の1つに時間のかかる処理があると、その実行が完了するまで、次の行には進みません。
どんな時に困るのでしょうか?
例)サーバーと通信を行った際に、リクエストが返ってくるまでに数秒以上もかかると困ります。
サーバーとの通信は非同期で行えば、リクエスト返信を待たなくても次の作業に進むことができます。
■左(同期処理イメージ)右(非同期処理イメージ)
非同期処理のメリット、デメリット
■ メリット - ユーザーを待たせない(重い処理を非同期にすることで)
■ デメリット - 制御が難しい(実行完了までデータが存在しない)
非同期処理にする方法(Promise)
■ Promiseの状態
- Pending: 初期状態
- fulfilled: 処理が成功した状態
- rejected: 処理が失敗した状態.
Promiseを関数内で利用する例
非同期処理にする方法(async/await)
Promiseよりaync/awaitの方がおすすめ - 記述がシンプル - 直感的で使いやすい
利用方法 - 非同期処理をともなう関数定義にasyncをつける - 非同期処理をともなう関数実行時にawaitをつける - awaitはaync付き関数内でしか利用できない
aync/awaitを関数内で利用する例
まとめ
WebAPIを叩く、データベースへクエリを投げる時などに非同期処理を活用する。(平行処理の場合は時間がかかるので)
参考
非同期処理の完了を待つ方法!Promise&async/await【分かりすぎて怖いJavaScript入門】 - YouTube