⏳ Async/await

What Is Async/await?

Async/await, introduced in ES2017, is syntactic sugar over Promises. It doesn't add new capabilities — under the hood it's still Promises and the event loop from the last two lessons — but it changes how the code reads. It's the difference between a recipe written in dense culinary shorthand and the same recipe written in plain, numbered steps: same dish, far easier to follow.

Compare the two styles doing the identical job:

function load() {
  return fetch('/api/user')
    .then(r => r.json())
    .then(user => {
      console.log(user);
      return user;
    });
}

async function load() {
  const r = await fetch('/api/user');
  const user = await r.json();
  console.log(user);
  return user;
}

The async version reads top to bottom like synchronous code — but it never blocks the thread. Each await quietly hands control back to the event loop while it waits, then resumes right where it left off.

The async Keyword

Putting async before a function does two things: it lets you use await inside, and it makes the function always return a Promise — even if your code returns a plain value.

async function greet(name) {
    return `Hello, ${name}!`;     // a plain string...
}

// ...but calling it gives you a Promise, not the string
console.log(greet('Alice'));                 // Promise { <fulfilled>: 'Hello, Alice!' }
greet('Alice').then(msg => console.log(msg)); // 'Hello, Alice!'

// So this async function is equivalent to:
function greetManual(name) {
    return Promise.resolve(`Hello, ${name}!`);
}

The await Keyword

await can only appear inside an async function (or at the top level of a module). It pauses the function until the Promise on its right settles, then evaluates to the resolved value. If the Promise rejects, await throws that reason as an exception.

async function processUser() {
    console.log('Starting to fetch user...');

    const user = await fetchUser(1);      // pause here until it resolves
    console.log('User fetched:', user.name);

    const posts = await fetchPosts(user.id);  // then pause for this one
    console.log('Posts fetched:', posts.length);

    return { user, posts };               // resolves the returned Promise
}

Here's the crucial mental model: await does not block the thread. While processUser is paused, the event loop is free to run other code — timers, clicks, other async functions. When the awaited Promise settles, the engine schedules the rest of processUser as a microtask and resumes it. The flow diagram:

Errors with try/catch

This is where async/await really shines. Because a rejected await throws, you handle async errors with the exact same try/catch/finally you'd use for synchronous code — no separate .catch to remember.

async function robustDataFetching() {
    try {
        const user = await fetchUser(1);

        if (!user.isActive) {
            throw new Error('User is not active');   // your own throws work too
        }

        const preferences = await fetchUserPreferences(user.id);
        const recommendations = await fetchRecommendations(preferences);
        return { user, preferences, recommendations };

    } catch (error) {
        // Catches rejections from ANY await above, plus your own throws
        console.error('Operation failed:', error.message);

        if (error.name === 'NetworkError') {
            return { error: 'Connection failed. Check your internet.' };
        }
        return { error: 'An unexpected error occurred.' };

    } finally {
        // Runs whether we succeeded or failed — perfect for cleanup
        console.log('Data fetching complete');
    }
}

Sequential vs. Parallel

The single most common async/await performance mistake is awaiting independent operations one after another when they could run at the same time. Awaiting is a pause — so consecutive awaits are strictly sequential.

Sequential — each waits for the last (slower)

async function fetchSequential() {
    console.time('Sequential');

    const user     = await fetchUser(1);       // ~1s
    const posts    = await fetchPosts(1);      // ~1s (starts only after user)
    const comments = await fetchComments(1);   // ~1s (starts only after posts)

    console.timeEnd('Sequential');             // ~3 seconds total
    return { user, posts, comments };
}

Use this style only when each step genuinely needs the previous step's result.

Parallel — start all, then await together (faster)

async function fetchParallel() {
    console.time('Parallel');

    // Kick off all three NOW (no await yet) — they run concurrently
    const userPromise     = fetchUser(1);
    const postsPromise    = fetchPosts(1);
    const commentsPromise = fetchComments(1);

    // Then wait for all of them at once
    const [user, posts, comments] = await Promise.all([
        userPromise, postsPromise, commentsPromise,
    ]);

    console.timeEnd('Parallel');               // ~1 second total
    return { user, posts, comments };
}

Real-World Examples

Example 1: Aggregating API data with fetch

A modern data loader using fetch (which returns Promises), with a proper response-status check that's easy to forget:

async function getWeatherReport(city) {
    try {
        const res = await fetch(`/api/weather/current?city=${encodeURIComponent(city)}`);
        if (!res.ok) throw new Error(`HTTP ${res.status}`);  // fetch only rejects on network errors
        const current = await res.json();

        const forecastRes = await fetch(`/api/weather/forecast?city=${encodeURIComponent(city)}`);
        if (!forecastRes.ok) throw new Error(`HTTP ${forecastRes.status}`);
        const forecast = await forecastRes.json();

        return {
            current,
            forecast,
            summary: `${city}: ${current.temp}°C, ${current.conditions}`,
        };
    } catch (error) {
        console.error('Weather API error:', error.message);
        return { error: 'Unable to fetch weather data' };
    }
}

Example 2: Polling with a while loop

Async/await makes loop-based async logic read naturally — something that's genuinely awkward with raw Promises:

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

async function pollForCompletion(processingId, onProgress) {
    const maxAttempts = 30;

    for (let attempt = 0; attempt < maxAttempts; attempt++) {
        const res = await fetch(`/api/status/${processingId}`);
        const status = await res.json();

        if (status.complete) return status.result;
        if (status.error)    throw new Error(status.error);

        onProgress(status.progress);
        await delay(1000);                 // wait a second, then poll again
    }
    throw new Error('Processing timeout');
}

Example 3: Retry with exponential backoff

async function retryWithBackoff(operation, maxRetries = 3, baseDelay = 1000) {
    let lastError;
    for (let attempt = 0; attempt < maxRetries; attempt++) {
        try {
            return await operation();          // success — done
        } catch (error) {
            lastError = error;
            if (attempt === maxRetries - 1) break;
            const wait = baseDelay * 2 ** attempt;  // 1s, 2s, 4s, ...
            console.log(`Attempt ${attempt + 1} failed, retrying in ${wait}ms`);
            await delay(wait);
        }
    }
    throw lastError;
}

Common Pitfalls

Pitfall 1: Forgetting await

async function buggy() {
    const data = fetchData();     // ❌ no await — data is a Promise, not the value
    console.log(data.name);       // undefined / TypeError

    const good = await fetchData();  // ✅
    console.log(good.name);
}

Pitfall 2: await inside forEach

// ❌ forEach ignores the returned Promises — "Done" logs immediately
items.forEach(async (item) => {
    await processItem(item);
});
console.log('Done');            // runs BEFORE any item finishes

// ✅ use a for...of loop, which honors await
for (const item of items) {
    await processItem(item);
}
console.log('Done');            // runs after all items

Pitfall 3: Serializing independent work

// ❌ These two don't depend on each other, yet run one after the other
const a = await fetchA();
const b = await fetchB();

// ✅ Run them together
const [a2, b2] = await Promise.all([fetchA(), fetchB()]);

Pitfall 4: Needless return await

// Redundant — the async function already wraps the result in a Promise
async function getUser() { return await fetchUser(); }

// Simpler (identical behavior in most cases)
async function getUser2() { return fetchUser(); }
// Exception: keep `return await` inside try/catch so errors are caught here.

Practice & Quiz

function getUserData(userId) {
    return getUser(userId)
        .then(user => getOrders(user.id)
            .then(orders => getOrderItems(orders[0].id)
                .then(items => ({ user, orders, items }))))
        .catch(error => { console.error(error); return null; });
}

async function getUserData(userId) {
    try {
        const user   = await getUser(userId);
        const orders = await getOrders(user.id);
        const items  = await getOrderItems(orders[0].id);
        return { user, orders, items };
    } catch (error) {
        console.error('Error:', error.message);
        return null;
    }
}

async function getUserDashboard(userId) {
    try {
        const [user, posts, comments] = await Promise.all([
            fetchUser(userId),
            fetchPosts(userId),
            fetchComments(userId),
        ]);
        return { user, posts, comments };
    } catch (error) {
        console.error('Failed to load dashboard:', error.message);
        return { error: 'Could not load dashboard' };
    }
}

Best Practices

✅ Do

• Wrap awaited code in try/catch, and use finally for cleanup
• Run independent work with Promise.all instead of serial awaits
• Check response.ok after fetch and throw on non-2xx responses
• Use for…of (not forEach) when you need to await inside a loop

❌ Don't

• Forget await — you'll operate on a Promise instead of its value
• Serialize awaits that don't depend on one another
• Leave a top-level async call without .catch or a surrounding try/catch
• Add return await outside a try where it's redundant

Summary

📚 Additional Resources

• MDN — async function
• MDN — await operator
• MDN — Using promises: async and await

🚀 What's Next?

You now have the full async toolkit — callbacks, Promises, and async/await. The next lesson zooms in on the error side of the story: how try/catch blocks work in depth, custom error types, throwing and re-throwing, and writing code that fails gracefully instead of silently.