nonobie — Real dev skills, explained like a friend would

Warming up the neural circuits...

What you'll learn

By the end of this chapter you will:

Understand what a is and why needs it
Chain .then(), .catch(), and .finally() to handle success, failure, and cleanup
Run multiple operations in parallel (not one-by-one) using Promise.all
Know when to use allSettled vs all vs race vs any
Write clean async code with async/await and avoid common sequential bottlenecks
Use the ES2024 Promise.withResolvers() pattern for advanced control

The Why: Escaping the Single Thread

JavaScript is single-threaded — it can only do one thing at a time. If you fetched data from a server synchronously (blocking), the entire page would freeze until the response arrives. No clicks, no animations, nothing.

Promises are JavaScript's solution. They are placeholders for a value that hasn't arrived yet. Think of them like a restaurant buzzer — you hand in your order (start the async operation), receive a promise (the buzzer), and go sit down. The buzzer tells you when your order is ready (the value is resolved) — you weren't blocking the counter the whole time.

// ❌ Hypothetical blocking code (not how JS works, but illustrates the problem)
const data = fetchFromServer(); // Page freezes for 3 seconds
 
// ✅ Promise-based (real JS) — page stays interactive
const dataPromise = fetchFromServer(); // Returns immediately with a Promise
dataPromise.then(data => render(data

Core Concepts: The Vocabulary of Async

1. Pending — The initial . The operation is in progress. Neither succeeded nor failed yet.

2. Fulfilled — The operation completed successfully. The Promise has a value.

3. Rejected — The operation failed. The Promise has a reason (error).

4. Settled — The final state. A Promise is settled once it is either Fulfilled or Rejected. It never changes state after that.

5. Sequential Execution — Running async operations one after another: await A; await B. Total time = time(A) + time(B). Slow when A and B don't depend on each other.

6. Parallel Execution — Running async operations simultaneously: Promise.all([A, B]). Total time = max(time(A), time(B)). Much faster.

Framework insight: React can't be async

React components cannot be async functions (yet). If you fetch data, you must store the result in state. When the Promise settles, call setState — this signals React to re-render the UI with the fresh data. The useEffect is the standard place to start async operations.

`new Promise((resolve, reject) => ...)` — Creating a Promise

The Promise constructor takes an executor function that receives two callbacks:

resolve(value) — call this when the operation succeeds
reject(reason) — call this when the operation fails

// Wrapping a callback-based API (setTimeout) in a Promise
function

Technical Comparison: Batching Strategies

Method	Resolves when	Rejects when	Best for
`Promise.all`	ALL fulfill	ANY rejects	Dependent data (need all or none)
`Promise.allSettled`	ALL settle	Never	Independent tasks (log all results)
`Promise.race`	First settles	First rejects	Timeouts (network vs. timer)
`Promise.any`	First fulfills	ALL reject	Fallbacks (primary vs. mirror)

Framework Integration: The Real World

Common Pitfalls (The Bug Table)

Mistake	What goes wrong	The fix
`await` inside `forEach`	`forEach` ignores returned Promises — doesn't wait	Use `for...of` or `Promise.all(arr.map(...))`
Forgetting `.catch()`	Uncaught rejection crashes Node.js processes	Always attach `.catch()` or use `try/catch`
Missing `await` before a Promise	Returns the Promise object, not the resolved value	Add `await` keyword
Sequential `await` in a loop	`time(A) + time(B) + time(C)` instead of `max(...)`	Use

Practice: Prove Your Mastery

beginner Challenge

4 min

The Delay Utility

Create a function delay(ms) that returns a Promise resolving after ms milliseconds. It should be usable with await.

Input— given data

data

await delay(1000); console.log("Done!")

Expected Output— your code should produce this

expected

"Done!" logged after 1 second

Write your solutionCtrl+Enter to run

Ctrl+Enter

beginner Challenge

5 min

The Parallel Loader

Fetch /api/user and /api/settings at the same time (not one-by-one). Return both results as { user, settings }.

Input— given data

data

Two independent API endpoints

Expected Output— your code should produce this

expected

{ user: {...}, settings: {...} }

Write your solutionCtrl+Enter to run

Ctrl+Enter

intermediate Challenge

7 min

The Timeout Wrapper

Write a withTimeout(promise, ms) function that rejects with "Timed out" if the given promise doesn't resolve within ms milliseconds.

Input— given data

data

withTimeout(slowFetch(), 2000)

Expected Output— your code should produce this

expected

Throws "Timed out" if slowFetch takes more than 2 seconds

Write your solutionCtrl+Enter to run

Ctrl+Enter

intermediate Challenge

8 min

The Retry Logic

Write a retry(fn, times) function that calls fn() up to times attempts, only failing if all attempts fail.

Input— given data

data

retry(() => unstableFetch(), 3)

Expected Output— your code should produce this

expected

Resolves on first success; rejects after 3 failures

Write your solutionCtrl+Enter to run

Ctrl+Enter

advanced Challenge

12 min

The Promise Dialog

Use Promise.withResolvers() to create a confirm(message) function that returns a Promise which resolves true when the user clicks OK and false when they click Cancel. (Assume you can create DOM elements.)

Input— given data

data

const ok = await confirm("Delete file?")

Expected Output— your code should produce this

expected

true or false based on button clicked

Write your solutionCtrl+Enter to run

Ctrl+Enter

Self-Check Quiz

Q1 / 3

MCQ

What does Promise.all() do?

function readFileAsText(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload  = (e) => resolve(e.target.result);
    reader.onerror = (e) => reject(new Error("File read failed"));
    reader.readAsText(file);
  });
}

fetch("/api/user/1")
  .then(response => response.json())     // Transform Response → JS object
  .then(user => user.name.toUpperCase()) // Transform data
  .then(name => console.log(name));      // Use the final result

Returns	Use when
New Promise	Handling or transforming a fulfilled value

fetch("/api/user/1")
  .then(res => res.json())
  .then(user => updateUI(user))
  .catch(error => {
    // Catches network errors, JSON parse errors, and updateUI errors
    showErrorMessage(error.message);
  });

setLoading(true);
 
fetch("/api/data")
  .then(res => res.json())
  .then(data => setData(data))
  .catch(err => setError(err.message))
  .finally(() => setLoading(false)); // Always hides spinner

Feature	`.then()`	`.catch()`	`.finally()`
Runs on success?	✅ Yes	❌ No	✅ Yes
Runs on failure?	❌ No	✅ Yes	✅ Yes
Receives value?	✅ Yes	✅ (error)	❌ No
Returns new Promise?	✅ Yes	✅ Yes	✅ Yes

`Promise.all([...promises])` — All or nothing

Runs all Promises in parallel. Resolves when every Promise fulfills. Rejects immediately if any single one rejects.

const [user, posts, comments] = await Promise.all([
  fetch("/api/user/1").then(r => r.json()),
  fetch("/api/user/1/posts").then(r => r.json()),
  fetch("/api/user/1/comments").then(r => r.json())
]);
 
// All three fetches ran simultaneously! Total time ≈ slowest individual fetch

When NOT to use Promise.all:

If any request failing should not block the others (use allSettled)
If the requests depend on each other (use sequential await)

Resolves when	Rejects when	Best for
ALL fulfill	ANY one rejects	Dependent data — you need everything or nothing

`Promise.allSettled([...promises])` — Resilient batch

Runs all in parallel. Never rejects. Always returns an array of result objects describing each outcome.

const results = await Promise.allSettled([
  sendEmail(user),
  sendPushNotification(user),
  updateActivityLog(user)
]);
 
// Check what succeeded and what failed
for (const result of results) {

Each result object:

{ status: "fulfilled", value: ... } — on success
{ status: "rejected", reason: Error } — on failure

Resolves when	Rejects when	Best for
ALL settle (either way)	Never	Independent tasks — log all results

`Promise.race([...promises])` — First to settle wins

Returns the result of the first Promise to settle — whether fulfilled or rejected.

// Classic timeout pattern
function withTimeout(promise, ms) {
  const timeout = new Promise((_, reject) =>
    setTimeout(() => reject(new Error("Timed out")),

Resolves/Rejects when	Best for
First to settle (win OR fail)	Timeouts, fastest-response routing

`Promise.any([...promises])` — First SUCCESS wins

Returns the result of the first Promise that fulfills. Only rejects if all Promises reject.

// Try multiple CDNs — use whichever responds first successfully
const asset = await Promise.any([
  fetch("https://cdn1.example.com/logo.png"),
  fetch("https://cdn2.example.com/logo.png"),
  fetch("https://cdn3.example.com/logo.png")
]);
// Gets the fastest successful response

Resolves when	Rejects when	Best for
FIRST fulfills	ALL reject	Fallbacks, mirrored servers

Decision tree — which batching method?

plaintext

I have multiple Promises to run...
  ├── I need ALL results, fail if any fails  → Promise.all
  ├── I need all results regardless of errors → Promise.allSettled
  ├── I want the first result (win OR fail)  → Promise.race
  └── I want the first SUCCESS only          → Promise.any

The `async` keyword

Placing async before a function declaration does two things:

Allows the await keyword inside the function
Makes the function always return a Promise — even if you return a plain value

async function getGreeting() {
  return "Hello!"; // Automatically wrapped in Promise.resolve("Hello!")
}
 
getGreeting(); // Promise { "Hello!" } — NOT just the string
await getGreeting(); // "Hello!" — now you get the value

The `await` keyword

await pauses the execution of the async function until the Promise settles, then returns the resolved value. The of your app keeps running — only this function pauses.

async function loadDashboard(userId) {
  const user = await fetchUser(userId); // Pause until user arrives
  const posts = await fetchPosts(user.id); // Pause until posts arrive
  return { user

Error handling with `try/catch`

async function loadUser(id) {
  try {
    const res = await fetch(`/api/user/${id}`);
    if (!res.ok) throw new Error(`HTTP ${res.status

The sequential bottleneck — the #1 mistake

// ❌ SLOW: Each await waits for the previous to finish
// Total time = 1s + 1s + 1s = 3 seconds
async function loadSlow() {
  const user    = await fetchUser(1);    // Wait 1s
  const posts   = await fetchPosts(1);   // Wait 1s more
  const friends

When should you use sequential await?

When each request depends on the result of the previous one:

async function placeOrder(cartId) {
  const cart = await fetchCart(cartId);           // Need cart first
  const order = await createOrder(cart);          // Need cart to create order
  const payment = await processPayment(

`Promise.withResolvers()` — External control (ES2024)

The classic Promise constructor forces you to resolve/reject from inside the executor. Sometimes you need to resolve from a completely different part of your code.

The old way (verbose):

let resolve, reject;
const promise = new Promise((res, rej) => {
  resolve = res;
  reject = rej;
});
// Now resolve and reject are accessible outside...

The new way — Promise.withResolvers():

const { promise, resolve, reject } = Promise.withResolvers();
 
// You can now call resolve() or reject() from anywhere!
document.querySelector("#confirm").onclick = () => resolve(true);
document.

Real-world: Modal dialog as a Promise

function showConfirmDialog(message) {
  const { promise, resolve } = Promise.withResolvers();
 
  const modal = createModal({
    message,
    onConfirm: () => resolve(true),
    onCancel:  ()

chrome119+firefox121+node22+

`Promise.resolve(value)` and `Promise.reject(reason)`

Create already-settled Promises immediately. Useful for testing and ensuring consistent return types.

// Return a Promise even from a cached (synchronous) result
function getUser(id) {
  if (cache.has(id)) {
    return Promise.resolve(cache.get(id)); // Sync value wrapped in Promise
  }
  return fetchUser

Framework Implementation: Async Orchestration

Pattern: The Loading State Hook

Components can't be async, so use useEffect + state:

jsx

function UserDashboard({ userId }) {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);
 
  useEffect(() => {
    let isMounted = true; // Prevent state update after unmount
 
    Promise.all([
      fetch(`/api/user/${userId}`).then(r => r.json()),
      fetch(`/api/user/${userId}/posts`).then(r => r.json())
    ])
      .then(([user, posts]) => {
        if (isMounted) setData({ user, posts });
      })
      .catch(err => {
        if (isMounted) setError(err.message);
      })
      .finally(() => {
        if (isMounted) setLoading(false);
      });
 
    return () => { isMounted = false; };
  }, [userId]);
 
  if (loading) return <Spinner />;
  if (error)   return <ErrorBanner msg={error} />;
  return <Dashboard data={data} />;
}

Chapter 6 — Promise & Async Masterclass

The Why: Escaping the Single Thread

Core Concepts: The Vocabulary of Async

1. The Promise Lifecycle (Instance Methods)

`new Promise((resolve, reject) => ...)` — Creating a Promise

Technical Comparison: Batching Strategies

Framework Integration: The Real World

Common Pitfalls (The Bug Table)

Practice: Prove Your Mastery

The Delay Utility

The Parallel Loader

The Timeout Wrapper

The Retry Logic

The Promise Dialog

Self-Check Quiz

`.then(onFulfilled)` — The success handler

`.catch(onRejected)` — The safety net

`.finally(callback)` — Always runs

2. Coordination (Static Methods)

`Promise.all([...promises])` — All or nothing

`Promise.allSettled([...promises])` — Resilient batch

`Promise.race([...promises])` — First to settle wins

`Promise.any([...promises])` — First SUCCESS wins

3. Async/Await (Syntactic Sugar)

The `async` keyword

The `await` keyword

Error handling with `try/catch`

The sequential bottleneck — the #1 mistake

4. Modern Async Control (ES2024+)

`Promise.withResolvers()` — External control (ES2024)

`Promise.resolve(value)` and `Promise.reject(reason)`

Pattern: The Loading State Hook

Chapter 6 — Promise & Async Masterclass

The Why: Escaping the Single Thread

Core Concepts: The Vocabulary of Async

1. The Promise Lifecycle (Instance Methods)

new Promise((resolve, reject) => ...) — Creating a Promise

Technical Comparison: Batching Strategies

Framework Integration: The Real World

Common Pitfalls (The Bug Table)

Practice: Prove Your Mastery

The Delay Utility

The Parallel Loader

The Timeout Wrapper

The Retry Logic

The Promise Dialog

Self-Check Quiz

.then(onFulfilled) — The success handler

.catch(onRejected) — The safety net

.finally(callback) — Always runs

2. Coordination (Static Methods)

Promise.all([...promises]) — All or nothing

Promise.allSettled([...promises]) — Resilient batch

Promise.race([...promises]) — First to settle wins

Promise.any([...promises]) — First SUCCESS wins

3. Async/Await (Syntactic Sugar)

The async keyword

The await keyword

Error handling with try/catch

The sequential bottleneck — the #1 mistake

4. Modern Async Control (ES2024+)

Promise.withResolvers() — External control (ES2024)

Promise.resolve(value) and Promise.reject(reason)

Pattern: The Loading State Hook

`new Promise((resolve, reject) => ...)` — Creating a Promise

`.then(onFulfilled)` — The success handler

`.catch(onRejected)` — The safety net

`.finally(callback)` — Always runs

`Promise.all([...promises])` — All or nothing

`Promise.allSettled([...promises])` — Resilient batch

`Promise.race([...promises])` — First to settle wins

`Promise.any([...promises])` — First SUCCESS wins

The `async` keyword

The `await` keyword

Error handling with `try/catch`

`Promise.withResolvers()` — External control (ES2024)

`Promise.resolve(value)` and `Promise.reject(reason)`