1 What is Async/Await?

Async/await is syntactic sugar built on top of promises. It allows you to write asynchronous code in a more readable, linear fashion, avoiding callback hell or promise chaining.

The diagram above illustrates the control flow in an async function, showing how execution pauses at await and resumes upon completion.

2 Basic Usage

Declare a function as async to use await inside it. Await pauses execution until the promise resolves.

Example: Simple Async Function

async function fetchData(): Promise<string> {
  return new Promise((resolve) => {
    setTimeout(() => resolve("Data fetched!"), 1000);
  });
}

async function main() {
  const data = await fetchData();
  console.log(data); // "Data fetched!"
}

main();

In TypeScript, specify the return type as Promise<T> for clarity and type checking.

The diagram above illustrates the control flow in an async function, showing how execution pauses at await and resumes upon completion, including error branches.

3 Error Handling

Use try/catch blocks to handle rejected promises gracefully.

Example: Error Handling with Try/Catch

async function fetchWithError(): Promise<string> {
  throw new Error("Fetch failed!");
}

async function main() {
  try {
    const data = await fetchWithError();
    console.log(data);
  } catch (error) {
    console.error("Error:", (error as Error).message); // Type assertion for safety
  }
}

main();

4 Typing Async Functions and Promises

TypeScript shines in async code by enforcing types on promise resolutions.

Example: Typed Promises

interface User {
  id: number;
  name: string;
}

async function getUser(id: number): Promise<User> {
  // Simulate API call
  return { id, name: "John Doe" };
}

async function displayUser(id: number) {
  const user = await getUser(id);
  console.log(user.name); // Type-safe access
}

displayUser(1);

If the promise type doesn't match, TypeScript will error at compile time.

The state machine diagram above conceptualizes how async/await manages states under the hood, which TypeScript helps enforce through types.

5 Advanced Patterns

Parallel Execution with Promise.all

async function fetchMultiple(): Promise<[string, string]> {
  const [data1, data2] = await Promise.all([
    fetchData("url1"),
    fetchData("url2")
  ]);
  return [data1, data2];
}

Async Iterators

async function* asyncGenerator() {
  yield await Promise.resolve(1);
  yield await Promise.resolve(2);
}

async function iterate() {
  for await (const value of asyncGenerator()) {
    console.log(value);
  }
}

iterate();

6 Best Practices

• Always type your async functions and promises.
• Avoid mixing callbacks with async/await—stick to promises.
• Use try/catch for error handling; avoid .catch() in async code.
• Handle uncaught exceptions with process.on('unhandledRejection').
• Test async code with tools like Jest for reliability.