JavaScript async/await

In the evolution of JavaScript, async/await represents the pinnacle of asynchronous pattern design. Introduced in ES2017, it is a “syntactic sugar” built on top of Promises. It allows developers to write asynchronous code that looks and behaves like synchronous, procedural code, dramatically increasing readability and maintainability.

1. The Core Syntax

The power of this feature lies in two keywords:

• async: Placed before a function declaration, it ensures the function always returns a promise. If the function returns a value, JavaScript automatically wraps it in a resolved promise.

• await: Can only be used inside an async function. It pauses the execution of the function until the promise settles (fulfills or rejects) and then returns the resulting value.

async function fetchUser() {
  // Execution "pauses" here until the fetch promise resolves
  const response = await fetch('https://api.example.com/user');
  
  // Execution resumes here once the data is ready
  const data = await response.json();
  
  return data; // This is automatically wrapped in a Promise
}

2. Error Handling with try...catch

One of the greatest benefits of async/await is that it permits the use of standard try...catch blocks for asynchronous error handling. This unifies the error logic for both synchronous and asynchronous operations.

async function loadDashboard() {
  try {
    const user = await fetchUser();
    const stats = await fetchStats(user.id);
    renderDashboard(user, stats);
  } catch (error) {
    // This catches network errors, JSON parsing errors, or manual throws
    console.error("Dashboard failed to load:", error);
    showErrorUI();
  } finally {
    hideLoadingSpinner();
  }
}

3. The Performance Pitfall: Sequential vs. Parallel

A common mistake is “awaiting” promises one after another when they don’t actually depend on each other. This creates a waterfall effect that slows down your application.

The Problem (Sequential)

Each request waits for the previous one to finish, even though they are independent.

const profile = await fetchProfile(); // Takes 2s
const posts = await fetchPosts();     // Takes 2s
// Total time: 4 seconds

The Solution (Parallel with Promise.all)

By initiating the promises first and then awaiting them collectively, you process them in parallel.

const profilePromise = fetchProfile();
const postsPromise = fetchPosts();

// Both requests are now running simultaneously
const [profile, posts] = await Promise.all([profilePromise, postsPromise]);
// Total time: ~2 seconds

// db.mjs
export const connection = await db.connect();

const urls = ['/api1', '/api2'];
for await (const response of urls.map(url => fetch(url))) {
  console.log(await response.json());
}