javaScriptの非同期処理について
JavaScriptでは3種類の非同期処理が使用されている
1.async/await
2.Promise
3.Callback
前提(同期処理と非同期処理の違い)
【同期処理】
・同期処理は上から順に1つずつ実行される
・前の処理が終わるまで次に進めない
【非同期処理】
・処理のかかる処理をバックグラウンドで実行
・ほかの処理を先に進めることができる
・API通信やファイル読み込みなどで使用
async/awaitの特徴
・同期処理のように書けるため、可読性が高い
・awaitを使用すると直列になる
※awaitは前の処理が終わるまでに次に進まないため、直列処理になる
・Promise.all()を併用すれば並列処理も可能
Promiseの特徴
・複数の非同期処理をチェーンで繋げられる
・Promise.all()やPromise.race()で並列処理が可能
・エラー処理は.catch()で個別に対応
ポイント
【直列処理】
「前の結果が次の処理に必要」な場合に使う
例)ログイン → 認証トークン取得 → トークンを使ってデータ取得
【並列処理】
「各処理が独立している」場合に使う
例)複数のAPIから同時にデータを取得して画面に表示
並列で高速化できるところは並列に、順序が必要なところは直列に
注意点
APIを投げるときは必ずtry/catchを使うようにする