Async Patterns

⚡ Async Patterns

Promises: The Foundation

A Promise represents a value that will (eventually) resolve or reject:

Copyconst promise: Promise<string> = new Promise<string>((resolve, reject) => {
  setTimeout(() => {
    resolve("Success!");
  }, 1000);
});

promise
  .then((result) => console.log(result))  // Logs "Success!" after 1s
  .catch((error) => console.error(error));   // Catches rejection

Type annotation: Promise<T> means "a Promise that resolves to T".

🎯 Async/Await: Synchronous-Looking Code

Async/await is syntactic sugar for Promises. It makes async code look like sync code:

Copyfunction fetchUser(id: number) {
  return fetch(`/api/users/${id}`)
    .then(r => r.json())
    .then(user => {
      console.log(user);
      return user;
    })
    .catch(err => {
      console.error(err);
      throw err;
    });
}

Copyasync function fetchUser(id: number) {
  try {
    const response = await fetch(`/api/users/${id}`);
    const user = await response.json();
    console.log(user);
    return user;
  } catch (err) {
    console.error(err);
    throw err;
  }
}

Key syntax:

• async before the function declares it returns a Promise
• await pauses execution until a Promise settles
• try/catch handles rejections like sync errors

Typing Async Functions

Copy// Async function always returns a Promise
async function getUser(id: number): Promise<{ id: number; name: string }> {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}

// You DON'T write "Promise<Promise<T>>" even though await unwraps
// TypeScript automatically unwraps for you

const user = await getUser(1);  // type: { id: number; name: string }

// If you don't await, you get the Promise:
const promise = getUser(1);  // type: Promise<{ id: number; name: string }>

🛡️ Error Handling in Async Code

Always wrap async code in try/catch:

Copyasync function processData() {
  try {
    const data = await fetch("/api/data").then(r => r.json());
    if (!data) throw new Error("No data");
    return data;
  } catch (error) {
    if (error instanceof TypeError) {
      console.error("Network error:", error.message);
    } else if (error instanceof Error) {
      console.error("Error:", error.message);
    }
    throw error;  // Re-throw to propagate
  }
}

🚀 Concurrent Operations: Running Multiple Promises

Promise.all() waits for all Promises to resolve. If any reject, it rejects:

Copyasync function fetchMultiple() {
  try {
    const [user, posts, comments] = await Promise.all([
      fetch("/api/user").then(r => r.json()),
      fetch("/api/posts").then(r => r.json()),
      fetch("/api/comments").then(r => r.json())
    ]);
    // All three fetches ran concurrently ✅
    return { user, posts, comments };
  } catch (error) {
    console.error("One or more requests failed", error);
    throw error;
  }
}

Copyasync function fetchAll() {
  const results = await Promise.allSettled([
    fetch("/api/critical"),    // Must succeed
    fetch("/api/optional")    // Nice to have
  ]);

  const [critical, optional] = results;

  if (critical.status === "fulfilled") {
    console.log("Critical data:", critical.value);
  } else {
    throw Error("Critical request failed");
  }

  if (optional.status === "fulfilled") {
    console.log("Optional data:", optional.value);
  } else {
    console.warn("Optional request failed, continuing anyway");
  }
}

Async Iteration: for await...of

For loops that wait on each iteration:

Copyasync function * fetchPages(pageCount: number) {
  for (let i = 1; i <= pageCount; i++) {
    const data = await fetch(`/api/page/${i}`).then(r => r.json());
    yield data;
  }
}

async function processPages() {
  for await (const page of fetchPages(5)) {
    console.log("Processing page:", page);
  }
}

🏗️ Real-World Pattern: Retry with Exponential Backoff

Copyasync function fetchWithRetry<T>(
  url: string,
  maxRetries: number = 3
): Promise<T> {
  for (let attempt = 0; attempt <= maxRetries; attempt++) {
    try {
      const response = await fetch(url);
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}`);
      }
      return response.json();
    } catch (error) {
      if (attempt === maxRetries) throw error;

      // Exponential backoff: 100ms, 200ms, 400ms, ...
      const delay = 100 * Math.pow(2, attempt);
      console.warn(`Retry ${attempt + 1}/${maxRetries} after ${delay}ms`);
      await new Promise(resolve => setTimeout(resolve, delay));
    }
  }
}

// Usage
const data = await fetchWithRetry<{ id: number; name: string }>("/api/data");

💻 Coding Challenges

🎯 What's Next

With async patterns mastered, we'll explore Module Systems & Namespaces — how to organize code across files and manage dependencies in TypeScript.