技術ブログ

(技術系中心)基本自分用備忘録なので、あくまで参考程度でお願いします。

非同期処理について

非同期処理について

プログラムは実行すると、コードを上から順に1行ずつ実行していきますね。

その処理の1つに時間のかかる処理があると、その実行が完了するまで、次の行には進みません。

どんな時に困るのでしょうか?

例)サーバーと通信を行った際に、リクエストが返ってくるまでに数秒以上もかかると困ります。

サーバーとの通信は非同期で行えば、リクエスト返信を待たなくても次の作業に進むことができます。

■左(同期処理イメージ)右(非同期処理イメージ)

f:id:lhiroki1205:20210527134434p:plain

非同期処理のメリット、デメリット

■ メリット - ユーザーを待たせない(重い処理を非同期にすることで)

■ デメリット - 制御が難しい(実行完了までデータが存在しない)

非同期処理にする方法(Promise)

■ Promiseの状態
- Pending: 初期状態
- fulfilled: 処理が成功した状態
- rejected: 処理が失敗した状態.

Promiseを関数内で利用する例

f:id:lhiroki1205:20210527135617p:plain

非同期処理にする方法(async/await)

Promiseよりaync/awaitの方がおすすめ - 記述がシンプル - 直感的で使いやすい

利用方法 - 非同期処理をともなう関数定義にasyncをつける - 非同期処理をともなう関数実行時にawaitをつける - awaitはaync付き関数内でしか利用できない

aync/awaitを関数内で利用する例 f:id:lhiroki1205:20210527141832p:plain

まとめ

WebAPIを叩く、データベースへクエリを投げる時などに非同期処理を活用する。(平行処理の場合は時間がかかるので)

参考

非同期処理の完了を待つ方法!Promise&async/await【分かりすぎて怖いJavaScript入門】 - YouTube