1. Synchronous-Looking Async Code

ES8 introduced async and await, syntactic sugar built directly on top of Promises.

2. Why It Matters

It allows you to write asynchronous code that reads sequentially like synchronous code, avoiding long .then() chains.

3. The Pattern

Mark a function as async to allow pausing execution at any await expression until the Promise settles:

function fetchUser(id) {
  return Promise.resolve({ id: id, name: "Alex" });
}

async function loadUserProfile() {
  console.log("Fetching user...");
  
  // Execution pauses here until Promise resolves
  const user = await fetchUser(42);
  
  console.log(`Loaded: ${user.name}`);
  return user;
}

loadUserProfile();

4. Parallel Execution with Promise.all

Avoid sequential waterfalls when requests are independent:

// Slow Waterfall (Sequential)
// const user = await fetchUser();
// const posts = await fetchPosts();

// Fast Parallel Execution!
async function loadDashboard() {
  const [user, posts] = await Promise.all([fetchUser(), fetchPosts()]);
  return { user, posts };
}

5. Common Mistakes

• Forgetting async Keyword: Using await outside an async function in older environments throws a syntax error.
• Creating Sequential Waterfalls: Awaiting independent network calls sequentially doubles load times. Use Promise.all()!

6. Try It Yourself

Write it yourself. The tests below run against your code.

function fetchUserAsync(userId) {
  return null;
}

7. Next Steps

Use async/await for clean async logic. Next, let's catch runtime errors with try...catch!