Promises for cleaner async in Node.js - Step-by-Step Execution

Concept Flow - Promises for cleaner async

Start async task

↓

Create Promise

↓

Promise executor runs

↓

Async operation success?

↓

Resolve promise

↓

Then or Catch

↓

Handle result

↓

End

This flow shows how a Promise starts an async task, then resolves or rejects, and finally handles the result cleanly.

Execution Sample

Node.js

const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Done'), 1000);
});
promise.then(result => console.log(result));

This code creates a Promise that waits 1 second then resolves with 'Done', then logs the result.

Execution Table

Step	Action	Promise State	Callback Triggered	Output
1	Create Promise object	Pending	No
2	Start setTimeout async task	Pending	No
3	Wait 1 second	Pending	No
4	setTimeout callback runs	Pending	No
5	Call resolve('Done')	Resolved	No
6	Promise state changes to Resolved	Resolved	Yes (then)
7	then callback runs with result='Done'	Resolved	Yes (then)	Console logs: Done
8	End of execution	Resolved	Yes (then)	Done printed

💡 Promise resolves after 1 second, then callback runs and logs 'Done', ending execution.

Variable Tracker

Variable	Start	After Step 1	After Step 5	After Step 7	Final
promise	undefined	Promise { <pending> }	Promise { <fulfilled>: 'Done' }	Promise { <fulfilled>: 'Done' }	Promise { <fulfilled>: 'Done' }
result	undefined	undefined	undefined	'Done'	'Done'

Key Moments - 3 Insights

Why does the 'then' callback run only after the Promise resolves?

Because the Promise starts in 'Pending' state (see Step 1-5). The 'then' callback triggers only when the Promise state changes to 'Resolved' (Step 6), ensuring the async task finished.

What happens if we call reject instead of resolve?

If reject is called, the Promise state changes to 'Rejected' instead of 'Resolved'. Then the 'catch' callback runs instead of 'then'. This is not shown here but follows the same flow logic.

Why is the output empty before the Promise resolves?

Because the async task hasn't finished yet (Steps 1-5). The Promise is still 'Pending', so no callback runs and no output is produced until resolution.

Visual Quiz - 3 Questions

Look at the execution table, what is the Promise state at Step 3?

A Pending

B Resolved

C Rejected

D Settled

💡 Hint

Check the 'Promise State' column at Step 3 in the execution table.

At which step does the 'then' callback first run?

A Step 5

B Step 6

C Step 7

D Step 8

💡 Hint

Look at the 'Callback Triggered' and 'Output' columns to see when the callback runs.

If the async task took 2 seconds instead of 1, how would the execution table change?

A Steps 3 and 4 would take longer before resolving

B Promise would resolve immediately at Step 2

C The 'then' callback would run before the Promise resolves

D The Promise would never resolve

💡 Hint

Consider the timing of the async task in Steps 3 and 4 before resolution.

Concept Snapshot

Promises help manage async tasks by representing future results.
Create a Promise with new Promise((resolve, reject) => {...}).
Use resolve(value) to mark success, reject(error) for failure.
Attach .then() for success handling, .catch() for errors.
Promises keep code clean and avoid nested callbacks.

Full Transcript

This lesson shows how Promises work in Node.js to handle asynchronous tasks cleanly. We start by creating a Promise that runs an async operation (setTimeout). Initially, the Promise is pending. After 1 second, the Promise resolves with a value 'Done'. When resolved, the .then() callback runs and logs the result. The execution table traces each step, showing the Promise state changes and when callbacks trigger. Key moments clarify why callbacks wait for resolution and what happens on rejection. The visual quiz tests understanding of Promise states and callback timing. The snapshot summarizes how to use Promises for cleaner async code.

Practice

1. What is the main purpose of using Promises in Node.js?

easy

A. To store data permanently on disk

B. To make the program run faster by using multiple CPUs

C. To write synchronous code only

D. To handle asynchronous tasks without freezing the program

Solution

1. Step 1: Understand asynchronous tasks

   Asynchronous tasks take time and can block the program if not handled properly.

2. Step 2: Role of Promises

   Promises allow handling these tasks without freezing the program by running code after the task finishes.

3. Final Answer:

   To handle asynchronous tasks without freezing the program -> Option D

4. Quick Check:

   Promises manage async tasks = A [OK]

Hint: Promises help avoid freezing during slow tasks [OK]

Common Mistakes:

• Thinking Promises speed up code execution
• Confusing Promises with synchronous code
• Believing Promises store data permanently

2. Which of the following is the correct way to create a Promise in Node.js?

easy

A. const p = Promise(() => { resolve(); });

B. const p = new Promise((resolve, reject) => { /* code */ });

C. const p = new Promise(resolve, reject);

D. const p = Promise.new((resolve, reject) => { });

Solution

1. Step 1: Check Promise constructor syntax

   The Promise constructor requires a function with two parameters: resolve and reject.

2. Step 2: Validate each option

   const p = new Promise((resolve, reject) => { /* code */ }); correctly uses new Promise with a function taking resolve and reject.

3. Final Answer:

   const p = new Promise((resolve, reject) => { /* code */ }); -> Option B

4. Quick Check:

   Correct Promise syntax = B [OK]

Hint: Use 'new Promise' with (resolve, reject) function [OK]

Common Mistakes:

• Omitting 'new' keyword
• Passing resolve and reject outside a function
• Using incorrect Promise constructor syntax

3. What will the following code output?

const promise = new Promise((resolve) => {
  setTimeout(() => resolve('Done'), 100);
});
promise.then(result => console.log(result));
console.log('Start');

medium

A. Start only

B. Done\nStart

C. Start\nDone

D. Done only

Solution

1. Step 1: Understand asynchronous setTimeout

   The setTimeout delays resolve by 100ms, so 'Done' logs after delay.

2. Step 2: Order of console logs

   'Start' logs immediately, then after 100ms 'Done' logs from the promise.

3. Final Answer:

   Start\nDone -> Option C

4. Quick Check:

   Async delay means 'Start' first, then 'Done' [OK]

Hint: Immediate logs appear before delayed Promise results [OK]

Common Mistakes:

• Assuming Promise resolves immediately
• Expecting 'Done' before 'Start'
• Ignoring asynchronous behavior of setTimeout

4. Identify the error in this Promise code:

const p = new Promise((resolve, reject) => {
  resolve('Success');
  reject('Error');
});
p.then(result => console.log(result))
 .catch(error => console.log(error));

medium

A. Calling reject after resolve has no effect

B. Missing catch block for errors

C. Promise constructor missing 'new' keyword

D. resolve and reject parameters are reversed

Solution

1. Step 1: Understand Promise state changes

   Once a Promise is resolved or rejected, further calls to resolve or reject are ignored.

2. Step 2: Analyze code behavior

   The code calls resolve first, so reject after that does nothing.

3. Final Answer:

   Calling reject after resolve has no effect -> Option A

4. Quick Check:

   Promise settles once; later calls ignored [OK]

Hint: Promise settles once; ignore calls after resolve/reject [OK]

Common Mistakes:

• Expecting both resolve and reject to run
• Forgetting Promise settles only once
• Confusing order of resolve and reject calls

5. You want to run two async tasks one after another using Promises. Which code correctly chains them to run sequentially?

hard

A. task1().then(() => task2()).then(result => console.log(result));

B. Promise.all([task1(), task2()]).then(results => console.log(results));

C. task1(); task2(); console.log('Done');

D. task1().catch(() => task2()).then(result => console.log(result));

Solution

1. Step 1: Understand sequential chaining

   To run tasks one after another, call the second in the first's .then() callback.

2. Step 2: Analyze options

   task1().then(() => task2()).then(result => console.log(result)); chains task2 after task1 completes, ensuring order.

3. Final Answer:

   task1().then(() => task2()).then(result => console.log(result)); -> Option A

4. Quick Check:

   Chain with .then() for sequential async tasks [OK]

Hint: Use .then() chaining to run tasks one after another [OK]

Common Mistakes:

• Using Promise.all for sequential tasks (runs parallel)
• Calling tasks without chaining (runs parallel)
• Misusing catch to run second task