async/await は Promise を簡潔に扱うための構文です。非同期処理を「同期コードの形」で書けるため、業務コードでも標準的に使われます。
基本
async を付けた関数は必ず Promise を返します。await は Promise の完了までその行で停止しますが、実際にはイベントループに制御が戻るだけでスレッドは止まりません。
async function run() { const res = await fetch('/api') const data = await res.json() return data }
エラー処理
try/catch と組み合わせることで、Promise.then().catch() より管理しやすくなります。
async function loadUser() { try { const r = await fetch('/user') return await r.json() } catch (e) { console.error(e) return null } }
並列化
await を順番に並べると直列実行になります。独立した処理は Promise.all でまとめて並列化します。
// 非効率 const a = await fetch('/a') const b = await fetch('/b') // 効率的 const pa = fetch('/a') const pb = fetch('/b') const [a2, b2] = await Promise.all([pa, pb])
await の動作
await は実行をブロックしません。Promise が解決されるまでイベントループに戻り、その後マイクロタスクとして再開されます。DOMContentLoaded と load の関係にも類似点があります。
まとめ
- async は Promise を返す関数になる
- await は Promise の完了まで処理を一時停止する
- try/catch と相性がよい
- 独立タスクは Promise.all で並列化
- 実際のスレッドは止まらない(イベントループで復帰)