Promise - Fundamental Understanding

Q: Promise - Fundamental Understanding

Core mental model A Promise is a one-way state machine: pending -> fulfilled or pending -> rejected . It settles once, and every chain step returns a new Promise. Chain propagation rules (must know) Practical scenario Checkout flow depends on profile -> shipping -> payment intent. Promise chain rules ensure each step receives the right input and failures route to one catch path. Common pitfalls Missing return in then handlers. Mixing callback nesting inside chain and losing error propagation. Using broad catch that hides root cause.

HighIntermediateJavascript

By FrontendAtlas Team · Updated Mar 8, 2026

Quick Answer

Promise fundamentals are about mechanics: executor timing, single-settlement state transitions, chain propagation, and microtask ordering. Mastering these explains most async bugs better than memorizing APIs.

Answer

Core mental model

A Promise is a one-way state machine: pending -> fulfilled or pending -> rejected. It settles once, and every chain step returns a new Promise.

Mechanic	Reality
Executor timing	Runs immediately when Promise is created.
then/catch timing	Callbacks run later as microtasks.
Settlement	First resolve/reject wins; later calls ignored.
Chaining	Each then returns a fresh Promise.

These four rules explain most Promise behavior.

JAVASCRIPT

console.log('A');

const p = new Promise((resolve) => {
  console.log('B executor');
  resolve(1);
  resolve(2); // ignored
});

p.then(v => console.log('C then:', v));
console.log('D');

// Output: A, B executor, D, C then: 1

Chain propagation rules (must know)

JAVASCRIPT

Promise.resolve(10)
  .then(v => v + 1)                 // next gets 11
  .then(v => Promise.resolve(v * 2)) // waits, next gets 22
  .then(() => { throw new Error('boom'); })
  .catch(err => {
    console.log(err.message); // boom
    return 7;                 // recovery value
  })
  .then(v => console.log(v)); // 7

If handler returns...	Next link receives...
Plain value	Fulfilled Promise with that value.
Promise/thenable	Resolved/rejected result of that Promise.
Thrown error	Rejected Promise with that error.

Promise chain behavior is deterministic, not magic.

JAVASCRIPT

// Common bug: missing return
fetch('/user')
  .then(r => {
    r.json(); // missing return
  })
  .then(data => {
    console.log(data); // undefined
  });

Practical scenario
Checkout flow depends on profile -> shipping -> payment intent. Promise chain rules ensure each step receives the right input and failures route to one catch path.

Common pitfalls

Missing return in then handlers.
Mixing callback nesting inside chain and losing error propagation.
Using broad catch that hides root cause.

Still so complicated?

A Promise chain is like a relay race: each runner must pass the baton (return). If one runner drops it, the next runner gets nothing.

Summary

Executor is synchronous; handlers are microtasks.
Promise settles once.
Each chain step returns a new Promise.
Return/throw control value and error propagation.