Error handling in HTTP calls in Vue - Step-by-Step Execution

Concept Flow - Error handling in HTTP calls

Start HTTP call

↓

Send request

↓

Wait for response

↓

Response received?

No→Catch error

↓

Set error state

↓

Check status code

↓

Set error state

Yes↓

Process data

↓

Update UI with data

↓

End

This flow shows how a Vue app sends an HTTP request, waits for the response, handles errors if any, and updates the UI accordingly.

Execution Sample

Vue

import { ref } from 'vue';

const data = ref(null);
const error = ref(null);

async function fetchData() {
  try {
    const res = await fetch('https://api.example.com/data');
    if (!res.ok) throw new Error('Network response was not ok');
    data.value = await res.json();
    error.value = null;
  } catch (err) {
    error.value = err.message;
    data.value = null;
  }
}

This Vue code fetches data from an API, sets the data if successful, or sets an error message if something goes wrong.

Execution Table

Step	Action	HTTP Response	Condition	State Change	UI Update
1	Call fetchData()	N/A	N/A	data=null, error=null	Show loading or empty
2	Send fetch request	Pending	N/A	No change yet	Show loading
3	Receive response	Status 200 OK	res.ok is true	Prepare to parse JSON	No change yet
4	Parse JSON data	Valid JSON	N/A	data set to parsed JSON	UI shows data
5	Clear error	N/A	N/A	error set to null	Remove error messages
6	End fetchData()	N/A	N/A	Final state: data with value, error null	UI updated with data
7	Call fetchData() again	N/A	N/A	Reset states	Show loading
8	Send fetch request	Pending	N/A	No change yet	Show loading
9	Receive response	Status 500 Error	res.ok is false	Throw error	No data update
10	Catch error	Error thrown	Catch block runs	error set to message, data null	Show error message
11	End fetchData()	N/A	N/A	Final state: data null, error set	UI shows error

💡 Execution stops after setting data or error based on response success or failure.

Variable Tracker

Variable	Start	After Step 4	After Step 5	After Step 10	Final
data	null	parsed JSON object	parsed JSON object	null	null or parsed JSON
error	null	null	null	'Network response was not ok'	'Network response was not ok' or null

Key Moments - 3 Insights

Why do we check if res.ok is false before parsing JSON?

Because a response can be received but still be an error (like 404 or 500). Checking res.ok ensures we only parse JSON if the response is successful, as shown in execution_table row 3 and 9.

What happens if fetch itself fails (like no internet)?

The catch block runs, setting the error message and clearing data, as seen in execution_table row 10.

Why do we reset error to null on successful fetch?

To clear any previous errors so the UI shows fresh data without old error messages, as in execution_table row 5.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'error' after step 5?

A null

B 'Network response was not ok'

C undefined

D parsed JSON object

💡 Hint

Check the 'State Change' column at step 5 where error is set to null.

At which step does the code detect a failed HTTP response?

A Step 4

B Step 9

C Step 3

D Step 10

💡 Hint

Look for the step where res.ok is false and an error is thrown (step 9).

If the fetch call fails due to no internet, which step shows the error being handled?

A Step 8

B Step 9

C Step 10

D Step 11

💡 Hint

The catch block runs on fetch failure, shown at step 10.

Concept Snapshot

Error handling in HTTP calls in Vue:
- Use async/await with try/catch
- Check response.ok before parsing JSON
- Set data on success, error message on failure
- Reset error on new successful fetch
- Update UI reactively based on data/error state

Full Transcript

This visual execution shows how Vue handles errors during HTTP calls. First, the fetchData function sends a request and waits for a response. If the response is successful (res.ok true), it parses JSON and updates the data variable, clearing any previous error. If the response is an error (res.ok false) or the fetch fails (network error), the catch block sets an error message and clears data. The UI updates reactively to show data or error messages accordingly. Key moments include checking res.ok before parsing, handling fetch failures, and resetting error state on success.