Promise chaining in Javascript - Step-by-Step Execution

Concept Flow - Promise chaining

Start with initial Promise

↓

First .then() callback runs

↓

Return value or Promise

↓

Next .then() waits for previous result

↓

Next .then() callback runs

↓

Repeat until chain ends

↓

Final result

A Promise chain runs each .then() after the previous Promise resolves, passing results along.

Execution Sample

Javascript

Promise.resolve(1)
  .then(x => x + 1)
  .then(x => Promise.resolve(x + 1))
  .then(console.log);

This code starts with 1, adds 1, then adds 1 again asynchronously, and logs the final result.

Execution Table

Step	Action	Input	Output/Returned	Next Step
1	Promise.resolve(1) creates resolved Promise	-	Promise resolved with 1	Call first .then() with 1
2	First .then() callback runs	1	Returns 2 (1 + 1)	Pass 2 to next .then()
3	Second .then() callback runs	2	Returns Promise resolved with 3	Wait for Promise to resolve
4	Promise from step 3 resolves	-	3	Pass 3 to next .then()
5	Third .then() callback runs (console.log)	3	Logs 3 to console	Chain ends

💡 All .then() callbacks completed, final value 3 logged, chain ends.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
x	-	2	2	3	3

Key Moments - 3 Insights

Why does the second .then() return a Promise instead of a direct value?

Because returning Promise.resolve(x + 1) creates a new Promise that delays the next .then() until it resolves, as shown in execution_table step 3 and 4.

How does the value pass from one .then() to the next?

Each .then() receives the resolved value from the previous Promise, either directly or after waiting for a returned Promise to resolve, as seen in execution_table steps 2, 4, and 5.

What happens if a .then() returns a non-Promise value?

It is wrapped automatically in a resolved Promise, so the next .then() receives it immediately, like in step 2 where 2 is returned directly.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'x' after step 3?

A 1

B 2

C 3

D Promise

💡 Hint

Check the 'Output/Returned' column at step 3 in execution_table.

At which step does the Promise returned by the second .then() resolve?

A Step 4

B Step 2

C Step 3

D Step 5

💡 Hint

Look for the row mentioning 'Promise from step 3 resolves' in execution_table.

If the first .then() returned Promise.resolve(x + 1) instead of x + 1, how would the execution_table change?

A Step 4 would be skipped

B Step 2 would return a direct value and step 3 would run immediately

C Step 2 would return a Promise and step 3 would wait for it to resolve

D The final console.log would log a Promise object

💡 Hint

Recall how returning a Promise delays the next .then() until resolution, as shown in steps 3 and 4.

Concept Snapshot

Promise chaining syntax:
Promise.resolve(value)
  .then(result => newResult)
  .then(nextResult => ...);

Each .then() waits for the previous Promise to resolve.
Return a value for immediate next step.
Return a Promise to delay next step until it resolves.

Full Transcript

Promise chaining means running multiple .then() callbacks one after another. Each .then() waits for the previous Promise to finish and passes its result forward. If a .then() returns a direct value, the next .then() runs immediately with that value. If it returns a Promise, the next .then() waits for that Promise to resolve before running. This lets us write steps that happen in order, even if some are asynchronous. In the example, we start with 1, add 1, then add 1 again asynchronously, and finally log 3. The execution table shows each step clearly, tracking inputs and outputs. This helps beginners see how values flow through the chain.