JavaScript の async/await

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 で並列化
• 実際のスレッドは止まらない（イベントループで復帰）