🧩 Common Async/Await Patterns

A Map of the Patterns

Every async problem is some mix of two questions: do these tasks depend on each other? and can the downstream service handle them all at once? Your answers point you at one of a handful of patterns.

💡 Patterns, not rules: real features often combine these — a waterfall whose one step fans out, wrapped in a circuit breaker. Learn each shape on its own, then mix.

The Waterfall (Sequential)

A waterfall runs steps in order because each one needs the previous result. Here, permissions depend on the user, and the dashboard depends on both. There is no way to parallelise a true dependency — and that's fine.

async function buildDashboard(userId) {
  try {
    const user = await getUser(userId);                 // step 1
    const permissions = await getPermissions(user.roleId); // step 2 needs step 1
    const content = await getContent(permissions);      // step 3 needs step 2
    return renderDashboard({ user, permissions, content });
  } catch (error) {
    console.error('Dashboard build failed:', error);
    throw error;
  }
}

Fan-out with Promise.all

When tasks are independent, start them together and await them as a group with Promise.all(). The total time collapses to roughly the slowest single task instead of the sum.

async function loadProfile(userId) {
  const [profile, posts, friends] = await Promise.all([
    fetchProfile(userId),
    fetchPosts(userId),
    fetchFriends(userId),
  ]);
  return { profile, posts, friends };
}

Partial Success: allSettled

Promise.allSettled() waits for every promise and never rejects. You get an array describing each outcome — { status: 'fulfilled', value } or { status: 'rejected', reason } — so one failure doesn't sink the rest.

async function loadWidgets(userId) {
  const results = await Promise.allSettled([
    fetchWeather(userId),
    fetchStocks(userId),
    fetchCalendar(userId),
  ]);

  // Keep the widgets that loaded; log the ones that didn't.
  return results
    .map((result, i) => {
      if (result.status === 'fulfilled') return result.value;
      console.warn(`Widget ${i} failed:`, result.reason);
      return null; // render a placeholder instead
    })
    .filter(Boolean);
}

Controlled Concurrency (Batching)

Firing 10,000 requests at once with Promise.all() will exhaust connections, hit rate limits, or crash the server you're calling. Batching processes a fixed number at a time: parallel within a batch, sequential between batches.

async function processInBatches(items, worker, batchSize = 5) {
  const results = [];
  for (let i = 0; i < items.length; i += batchSize) {
    const batch = items.slice(i, i + batchSize);
    // Parallel within the batch...
    const batchResults = await Promise.all(batch.map(worker));
    results.push(...batchResults);
    // ...then the loop moves to the next batch (sequential between batches)
    console.log(`Finished batch ${i / batchSize + 1}`);
  }
  return results;
}

// Fetch 1,000 users, but never more than 5 requests in flight at once
const users = await processInBatches(userIds, (id) => fetchUser(id), 5);

The Circuit Breaker

When a downstream service is down, hammering it with retries makes things worse and ties up your own resources. A circuit breaker "trips" after a threshold of failures: while open it fails fast without calling the service, and after a cooldown it lets one test request through to see if the service recovered.

class CircuitBreaker {
  constructor(action, { failureThreshold = 5, cooldownMs = 30000 } = {}) {
    this.action = action;
    this.failureThreshold = failureThreshold;
    this.cooldownMs = cooldownMs;
    this.state = 'CLOSED';       // CLOSED | OPEN | HALF_OPEN
    this.failures = 0;
    this.openedAt = 0;
  }

  async execute(...args) {
    if (this.state === 'OPEN') {
      if (Date.now() - this.openedAt < this.cooldownMs) {
        throw new Error('Circuit is open — service unavailable');
      }
      this.state = 'HALF_OPEN'; // time to test the waters
    }

    try {
      const result = await this.action(...args);
      this.reset();             // success closes the circuit
      return result;
    } catch (error) {
      this.recordFailure();
      throw error;
    }
  }

  recordFailure() {
    this.failures++;
    if (this.state === 'HALF_OPEN' || this.failures >= this.failureThreshold) {
      this.state = 'OPEN';
      this.openedAt = Date.now();
    }
  }

  reset() {
    this.state = 'CLOSED';
    this.failures = 0;
  }
}

// Usage
const api = new CircuitBreaker((path) => fetchJSON(`/api/${path}`));
try {
  const data = await api.execute('users/123');
} catch (error) {
  // Fails fast while the circuit is open instead of waiting on a dead service
  console.warn(error.message);
}

Hands-on Exercise

async function uploadAll(files, upload, limit = 3) {
  const succeeded = [];
  const failed = [];

  for (let i = 0; i < files.length; i += limit) {
    const batch = files.slice(i, i + limit);
    const outcomes = await Promise.allSettled(batch.map(upload));

    outcomes.forEach((outcome, j) => {
      const file = batch[j];
      if (outcome.status === 'fulfilled') {
        succeeded.push(file);
      } else {
        failed.push({ file, reason: outcome.reason });
      }
    });
  }

  return { succeededCount: succeeded.length, failed };
}

// const report = await uploadAll(myFiles, uploadToS3, 3);
// report.failed lists exactly which uploads to retry later

Summary & Quiz

📚 Further Reading

• MDN — Promise.all()
• MDN — Promise.allSettled()
• Microsoft — Circuit Breaker pattern

🚀 What's Next?

You now have a vocabulary of async patterns. Next we put them to work against the browser's most-used async API — the Fetch API — learning to make requests, read responses, and handle real HTTP.