Async/Await

Async/await appears in virtually every AI-generated file that touches data. Understanding it helps you read the most common pattern in modern web development.

Why Async Exists

Some operations aren't instant:

• API calls — Fetching data from a server takes milliseconds to seconds
• Database queries — Reading from or writing to a database
• File operations — Reading or writing files on disk

Without async, your app would freeze while waiting. With async, it handles these gracefully.

How It Looks

// Without async — code freezes while waiting
const user = fetchUser(1)  // user is a Promise, not actual data

// With async/await — code waits properly
const user = await fetchUser(1)  // user is the actual data

The await keyword means "pause here until this finishes."

The Two Keywords

• async — Marks a function as asynchronous (it might need to wait for things)
• await — Pauses execution until the operation completes

They always appear together — await can only be used inside an async function.

Reading AI-Generated Async Code

When you see async and await in AI code:

1. Find the async function — This is where waiting happens
2. Spot the await calls — These are the slow operations
3. Check error handling — Look for try/catch blocks around awaits
4. Follow the data flow — The awaited result gets stored in a variable

Common Pattern

async function loadDashboard() {
  const user = await fetchUser()
  const stats = await fetchStats(user.id)
  return { user, stats }
}

This reads almost like English: "Fetch the user, then fetch their stats, then return both."