Error handling with async and await in Javascript - Step-by-Step Execution

Concept Flow - Error handling with async and await

Start async function

↓

Try block: await async call

↓

Async call success?

No→Catch block: handle error

↓

Error handled/logged

↓

Continue after await

↓

End function

The async function tries to await a promise. If it succeeds, it continues. If it fails, the catch block handles the error.

Execution Sample

Javascript

async function fetchData() {
  try {
    const response = await fetch('url');
    console.log('Data received');
  } catch (error) {
    console.log('Error:', error.message);
  }
}

This code tries to fetch data asynchronously and logs success or error message.

Execution Table

Step	Action	Evaluation	Result
1	Call fetchData()	Start async function	Waiting for fetch()
2	Await fetch('url')	fetch promise pending	Waiting for response
3	fetch resolves successfully	Try block continues	Data received logged
4	Function ends	No error	Normal completion
5	Call fetchData() again	Start async function	Waiting for fetch()
6	Await fetch('url')	fetch promise rejected	Error thrown
7	Catch block runs	Error caught	Error message logged
8	Function ends	Handled error	Normal completion

💡 Execution stops after function completes normally or after error is caught and handled.

Variable Tracker

Variable	Start	After Step 3	After Step 7	Final
response	undefined	Response object	undefined	undefined
error	undefined	undefined	Error object	Error object

Key Moments - 3 Insights

Why does the catch block run only when fetch fails?

Because in the execution_table at step 6, the fetch promise rejects, triggering the catch block at step 7 to handle the error.

What happens to the variable 'response' if fetch fails?

As shown in variable_tracker, 'response' remains undefined after step 7 because the assignment in the try block never completes.

Does the function stop immediately when an error occurs?

No, the function continues to the catch block to handle the error, then ends normally as seen in steps 7 and 8.

Visual Quiz - 3 Questions

Look at the execution_table, what is logged at step 3?

A 'Data received'

B 'Error: ...'

C Nothing logged

D 'Waiting for fetch()'

💡 Hint

Check the 'Result' column at step 3 in execution_table.

At which step does the catch block handle an error?

A Step 4

B Step 2

C Step 7

D Step 1

💡 Hint

Look for 'Catch block runs' in the 'Action' column of execution_table.

If fetch never fails, what happens to the 'error' variable?

A It becomes an Error object

B It remains undefined

C It stores the response data

D It causes the function to crash

💡 Hint

See variable_tracker for 'error' after step 3 when fetch succeeds.

Concept Snapshot

async function example() {
  try {
    const result = await promise;
    // success path
  } catch (err) {
    // error handling
  }
}
Use try-catch to handle errors from awaited promises safely.

Full Transcript

This visual trace shows how an async function uses try-catch to handle errors. The function starts and awaits a fetch call. If fetch succeeds, the try block logs success and the function ends normally. If fetch fails, the error is caught in the catch block and logged, then the function ends normally. Variables 'response' and 'error' change accordingly. This pattern helps keep async code safe and clear.