1. Concept library
  2. JavaScript & TypeScript
  3. Module 6: Async patterns and fetch

Concept

Promises and async/await

A Promise stands for a value that arrives later. async functions return one, and await pauses inside them until it settles, which makes asynchronous code read top to bottom.

What a session covers

The tutor works through these with you, in conversation and code. A session ends when you have shown them, not when a video does.

  1. Explain what a Promise represents and what an async function returns
  2. Write an async function that awaits a result and handles a rejection
  3. Spot the missing await that leaves a Promise where a value was expected

In practice

A few lines that show Promises and async/await doing its job.

TypeScript
async function loadUser(id: string): Promise<User> {
  const response = await fetch("/api/users/" + id);
  if (!response.ok) throw new Error("HTTP " + response.status);
  return (await response.json()) as User;
}

loadUser("7")
  .then((user) => console.log(user.name))
  .catch((error) => console.error(error));

The common mistake

Watch for

Forgetting await, so a Promise<User> is used where a User was expected. Calling .name on it gives undefined, and a thrown error inside becomes an unhandled rejection instead of reaching your catch.

What to know first

Your roadmap puts these before Promises and async/await, unless you already know them.

How it stays learned

Once a session shows you understand Promises and async/await, it comes back for review. Each review takes a minute and tells the memory model how well you still know it.

  1. Day 3First recall, while it is fresh
  2. Day 7Second, a week on
  3. Day 18Last, when it has settled

Where it leads

Topics that build on Promises and async/await.