Async/await syntax in Node.js - Step-by-Step Execution

Concept Flow - Async/await syntax

Start async function

↓

Encounter await

↓

Pause function execution

↓

Wait for Promise to resolve

↓

Resume function with resolved value

↓

Continue to next line

↓

Function completes and returns

↓

Caller receives resolved value

Async functions pause at await until the Promise resolves, then resume with the result, making asynchronous code look like normal sequential code.

Execution Sample

Node.js

async function fetchData() {
  const data = await fetch('https://api.example.com/data');
  const json = await data.json();
  return json;
}

This async function fetches data from an API, waits for the response, converts it to JSON, and returns it.

Execution Table

Step	Action	Evaluation	Result
1	Call fetchData()	Starts async function	Function execution begins
2	Execute 'await fetch(...)'	Pause until fetch Promise resolves	Pause function, wait for network
3	Fetch Promise resolves	Resume function with Response object	data = Response object
4	Execute 'await data.json()'	Pause until json() Promise resolves	Pause function, parse JSON
5	json() Promise resolves	Resume function with JSON data	json = parsed JSON object
6	Return json	Function completes with JSON data	Caller receives JSON object

💡 Function completes after all awaits resolve and returns the final JSON data

Variable Tracker

Variable	Start	After Step 3	After Step 5	Final
data	undefined	Response object	Response object	Response object
json	undefined	undefined	Parsed JSON object	Parsed JSON object

Key Moments - 3 Insights

Why does the function pause at 'await fetch(...)'?

Because 'await' waits for the Promise from fetch to resolve before continuing, as shown in execution_table step 2 and 3.

What type of value does 'await data.json()' return?

'await data.json()' returns the parsed JSON object after the Promise resolves, as seen in execution_table step 5.

Does the async function return immediately when called?

No, it returns a Promise immediately, but the internal code pauses at awaits until resolved, explained in execution_table step 1 and final step.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'data' after step 3?

A undefined

B Parsed JSON object

C Response object

D Promise

💡 Hint

Check the 'variable_tracker' row for 'data' after step 3.

At which step does the function resume after waiting for the JSON parsing?

A Step 4

B Step 5

C Step 6

D Step 3

💡 Hint

Look at the 'execution_table' where 'json() Promise resolves' and function resumes.

If we remove 'await' before 'fetch', what changes in the execution?

A Function returns a Promise immediately without waiting

B Function pauses longer

C Function throws an error

D No change in behavior

💡 Hint

Consider how 'await' affects pausing shown in the 'concept_flow' and 'execution_table'.

Concept Snapshot

async function name() {
  const result = await somePromise;
  // code waits here until Promise resolves
  return result;
}

- 'async' marks function as asynchronous
- 'await' pauses execution until Promise resolves
- Makes async code look like sync
- Function returns a Promise immediately

Full Transcript

Async/await syntax lets you write asynchronous code that looks like normal sequential code. When an async function runs, it pauses at each 'await' until the Promise resolves. For example, calling 'await fetch()' pauses the function until the network response arrives. Then the function resumes with the response object. Next, 'await data.json()' pauses again until the JSON is parsed. Finally, the function returns the parsed JSON. This way, you avoid nested callbacks and make code easier to read. The function itself returns a Promise immediately, so callers can use 'then' or 'await' on it. The execution table shows each step: starting the function, pausing at awaits, resuming with results, and returning the final value. Variables like 'data' and 'json' update only after their awaited Promises resolve. Remember, without 'await', the function won't pause and will return a Promise immediately without waiting for the result.

Practice

1. What does the await keyword do inside an async function in Node.js?

easy

A. It converts a promise into a callback function.

B. It makes the function run faster by skipping the promise.

C. It stops the entire program until the promise finishes.

D. It pauses the function execution until the promise resolves or rejects.

Solution

1. Step 1: Understand the role of await

   The await keyword pauses the execution of the async function until the promise it waits for settles (resolves or rejects).

2. Step 2: Differentiate from blocking behavior

   This pause only affects the async function, not the entire program, allowing other code to run concurrently.

3. Final Answer:

   It pauses the function execution until the promise resolves or rejects. -> Option D

4. Quick Check:

   await pauses async function = C [OK]

Hint: Remember: await pauses only async function, not whole program [OK]

Common Mistakes:

• Thinking await blocks the entire program
• Confusing await with callbacks
• Believing await speeds up code by skipping promises

2. Which of the following is the correct syntax to declare an async function in Node.js?

easy

A. function async myFunc() {}

B. async function myFunc() {}

C. function myFunc async() {}

D. async: function myFunc() {}

Solution

1. Step 1: Recall async function declaration syntax

   In Node.js, the correct way to declare an async function is by placing the async keyword before the function keyword.

2. Step 2: Check each option

   async function myFunc() {} matches the correct syntax: async function myFunc() {}. Others are invalid syntax.

3. Final Answer:

   async function myFunc() {} -> Option B

4. Quick Check:

   async before function keyword = B [OK]

Hint: Put async right before function keyword to declare async function [OK]

Common Mistakes:

• Placing async after function name
• Using colons or other symbols incorrectly
• Writing async inside parentheses

3. What will be the output of the following code?

async function getNumber() {
  return 42;
}

async function main() {
  const result = await getNumber();
  console.log(result);
}

main();

medium

A. 42

B. Error: await used outside async function

C. undefined

D. Promise { 42 }

Solution

1. Step 1: Understand async function return values

   The function getNumber is async and returns 42, which means it returns a promise that resolves to 42.

2. Step 2: Await the promise in main

   The await keyword waits for the promise to resolve, so result gets the value 42, which is then logged.

3. Final Answer:

   42 -> Option A

4. Quick Check:

   await unwraps promise value = D [OK]

Hint: Await unwraps promise to get actual value inside async function [OK]

Common Mistakes:

• Expecting a Promise object printed
• Forgetting await causes Promise logged
• Using await outside async function

4. Identify the error in this code snippet:

async function fetchData() {
  const data = await fetch('https://api.example.com/data');
  return data.json();
}

fetchData().then(console.log);

medium

A. Missing await before data.json() call

B. fetch cannot be used in Node.js

C. async keyword is missing before fetchData

D. Cannot return data from async function

Solution

1. Step 1: Analyze the fetchData function

   The function awaits the fetch call, which returns a Response object. Calling data.json() returns a promise.

2. Step 2: Check promise handling for data.json()

   Since data.json() returns a promise, it should be awaited to get the parsed JSON before returning.

3. Final Answer:

   Missing await before data.json() call -> Option A

4. Quick Check:

   Await promises before returning parsed data = A [OK]

Hint: Await all promises inside async functions before returning [OK]

Common Mistakes:

• Not awaiting nested promises like data.json()
• Assuming fetch is unavailable in Node.js (modern Node supports it)
• Forgetting async keyword on async functions

5. You want to fetch user data and then fetch posts for that user sequentially using async/await. Which code snippet correctly handles errors and ensures posts are fetched only after user data is received?

async function getUserAndPosts() {
  try {
    const user = await fetchUser();
    const posts = await fetchPosts(user.id);
    return { user, posts };
  } catch (error) {
    console.error('Error fetching data:', error);
    return null;
  }
}

hard

A. fetchPosts runs before fetchUser completes

B. Does not handle errors because try/catch is missing

C. Correctly handles errors and fetches posts after user data

D. Returns posts without waiting for fetchPosts promise

Solution

1. Step 1: Check async/await sequence

   The code awaits fetchUser() first, then uses the user ID to await fetchPosts(), ensuring sequential execution.

2. Step 2: Verify error handling

   The try/catch block correctly catches any errors from either await call and logs them, returning null on failure.

3. Final Answer:

   Correctly handles errors and fetches posts after user data -> Option C

4. Quick Check:

   Try/catch with sequential await = A [OK]

Hint: Use try/catch around awaits to handle errors sequentially [OK]

Common Mistakes:

• Omitting try/catch for error handling
• Calling second await before first completes
• Returning promises without awaiting them