Promises and Async/Await

Promises and Async/Await | JavaScript Course | SovranCode

COMPLETE LESSON · ABOUT 28 MIN OF ACTIVE PRACTICE

Learn Promises and Async/Await step by step

Follow the lesson in order: understand the model, trace worked examples, run a controlled experiment, debug a faulty assumption, build independently, and verify your reasoning.

LESSON MAP

What you will understand and apply

Trace pending, fulfilled, and rejected promise states.
Explain what await pauses and what continues running.
Choose sequential, concurrent, or all-settled coordination.
Place error handling at a layer that can recover.

DEEP EXPLANATION

Build the complete mental model

Promises represent eventual settlement

A Promise starts pending and settles once by fulfilling with a value or rejecting with a reason. then returns a new Promise, which is why transformations and errors flow through a chain. An async function always returns a Promise: returning a value fulfills it, and throwing rejects it. Handlers run in the microtask queue after the current synchronous call stack completes.

await is local suspension, not global blocking

await pauses the surrounding async function until the observed Promise settles. Rendering, timers, input, and other tasks can continue. A try/catch around await handles rejection from that awaited chain. Do not catch an error at a layer that cannot recover merely to log and return undefined; add context and rethrow, or let a user-facing boundary choose retry, fallback, or failure UI.

Concurrency begins when operations are called

Sequential awaits are required when the second operation depends on the first result. Independent operations should usually be started together and observed with Promise.all. Promise.all rejects when one input rejects; Promise.allSettled returns every outcome. Concurrency is not the same as parallel CPU execution, and unbounded request batches still need limits.

WORKED EXAMPLES

Read the decision before the syntax

Example 1: Start independent work together

Both operations begin before the first await, so total time approaches the slower operation rather than their sum.

async function loadPage() {
  const profilePromise = loadProfile();
  const coursesPromise = loadCourses();
  const [profile, courses] = await Promise.all([profilePromise, coursesPromise]);
  return { profile, courses };
}

Example 2: Preserve every outcome

allSettled is useful when partial results remain valuable and each failure can be presented separately.

const results = await Promise.allSettled(tasks.map(runTask));
for (const result of results) {
  if (result.status === "fulfilled") console.log("done", result.value);
  else console.warn("failed", result.reason);
}

How to trace this lesson

Run synchronous statements first and note each Promise created.
Mark the async function suspended at every await.
Identify which operations depend on earlier results and which are independent.
For every rejection, name the boundary responsible for retry, fallback, or display.

Common mistakes and corrections

Awaiting independent calls one after another.: Start them together and coordinate with Promise.all when failure policy matches.
Assuming await blocks the browser.: It suspends only its async continuation.
Catching and returning undefined silently.: Recover meaningfully or rethrow with useful context.

PRACTICE LADDER

Move from recognition to independent work

1
Predict ordering among synchronous logs, a resolved Promise, and setTimeout.
2
Measure sequential and concurrent delayed tasks.
3
Compare all and allSettled under one rejection.
4
Design loading, partial-success, failure, and retry states.

Complete these in order. The final step should work without copying the lesson example; use the runner and lab below to test it.

A Promise represents one future settlement

A promise begins pending and later fulfills with a value or rejects with a reason. await pauses only the surrounding async function, not the whole browser. Catch errors at a layer that can add recovery or context rather than swallowing them where nothing useful can happen.

Concurrency depends on when work starts

Sequential awaits are correct when the second operation needs the first result. Independent work should usually start together and be awaited with Promise.all. Promise.all fails fast, while allSettled reports every outcome. Choose based on the product behavior required when one operation fails.

RUNNABLE EXAMPLE

Change one assumption at a time

Change the delays and compare sequential awaits with Promise.all. Measure the elapsed time and explain why the concurrent version finishes sooner.

const delay = (value, ms) => new Promise((resolve) => setTimeout(() => resolve(value), ms));
async function loadDashboard() {
  const [profile, projects] = await Promise.all([delay({ name: 'Mina' }, 80), delay(['HTML', 'CSS'], 120)]);
  return { profile, projects };
}
console.log(await loadDashboard());

const delay = (value, ms) => new Promise((resolve) => setTimeout(() => resolve(value), ms));
async function loadDashboard() {
  const [profile, projects] = await Promise.all([delay({ name: 'Mina' }, 80), delay(['HTML', 'CSS'], 120)]);
  return { profile, projects };
}
console.log(await loadDashboard());

Press Run to execute your code.

DEBUGGING CHALLENGE

Locate the first incorrect value

Predict the failure and write your repair before revealing the explanation.

const profile = await loadProfile();
const projects = await loadProjects();

Reveal repair and explanation

const [profile, projects] = await Promise.all([
  loadProfile(),
  loadProjects(),
]);

If the requests are independent, starting the second only after the first finishes adds unnecessary waiting.

INDEPENDENT LAB

Build without copying the example

Create three delayed tasks, run independent tasks together, and report pending, success, and failure states.

const delay = (value, ms, fail = false) => new Promise((resolve, reject) => setTimeout(() => fail ? reject(new Error(String(value))) : resolve(value), ms));

const delay = (value, ms, fail = false) => new Promise((resolve, reject) => setTimeout(() => fail ? reject(new Error(String(value))) : resolve(value), ms));

Press Run to execute your code.

Self-review checklist Independent work begins before awaiting results. A rejected task produces a useful handled message. The example distinguishes allSettled from fail-fast Promise.all.What did you predict, observe, and change?

KNOWLEDGE CHECK

Explain the rule, not only the syntax

1. Does await block the entire browser? No, it pauses the surrounding async function Yes, always Only when a promise fulfills

2. Which method starts no work by itself but awaits independent promises together? Promise.all Array.find JSON.parse

Loading saved work…

Code and answers save automatically. Guest work stays on this device; signed-in work syncs to your account. The runner is isolated, blocks network access, and stops long-running console programs.

1. JavaScript Foundations

2. Functions and Collections

3. Objects and Structured Data

4. Browser Interfaces

5. Async and Reliable Applications

6. Application Engineering