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.

Practice

1. What is the main purpose of using try...catch blocks in Vue HTTP calls?

easy

A. To handle errors when the HTTP request fails or returns an error

B. To speed up the HTTP request

C. To style the HTTP response data

D. To automatically retry the HTTP request

Solution

1. Step 1: Understand the role of try...catch

   The try...catch block is used to catch errors that happen during code execution, such as network failures or exceptions.

2. Step 2: Apply to HTTP calls in Vue

   When making HTTP calls, errors like failed requests or server errors can occur. Using try...catch helps catch these errors and handle them gracefully.

3. Final Answer:

   To handle errors when the HTTP request fails or returns an error -> Option A

4. Quick Check:

   Error handling = To handle errors when the HTTP request fails or returns an error [OK]

Hint: Use try...catch to catch HTTP errors in Vue calls [OK]

Common Mistakes:

• Thinking try...catch speeds up requests
• Using try...catch to style data
• Assuming try...catch retries requests automatically

2. Which of the following is the correct syntax to check if an HTTP response was successful in Vue?

easy

A. if (response.status === 200) { ... }

B. if (response.success) { ... }

C. if (response.error) { ... }

D. if (response.ok) { ... }

Solution

1. Step 1: Identify the standard property for success

   The response.ok property is a boolean that is true if the HTTP status code is in the 200-299 range, indicating success.

2. Step 2: Compare options

   if (response.status === 200) { ... } checks for exactly 200, which is valid but less flexible. if (response.ok) { ... } uses response.ok, which is the recommended and clearer way. Options C and D are not valid properties.

3. Final Answer:

   if (response.ok) { ... } -> Option D

4. Quick Check:

   Check response.ok for success = if (response.ok) { ... } [OK]

Hint: Use response.ok to check HTTP success easily [OK]

Common Mistakes:

• Checking response.error which does not exist
• Checking response.success which is invalid
• Only checking for status 200, missing other success codes

3. Consider this Vue code snippet:
<pre>async function fetchData() { try { const response = await fetch('https://api.example.com/data'); if (!response.ok) { throw new Error('Network response was not ok'); } const data = await response.json(); return data; } catch (error) { return 'Fetch failed'; } } What will fetchData() return if the server responds with status 404?

medium

A. The JSON data from the response

B. 'Fetch failed'

C. undefined

D. An unhandled error

Solution

1. Step 1: Analyze response status handling

   The code checks response.ok. For status 404, response.ok is false, so it throws an error.

2. Step 2: Understand catch block behavior

   The thrown error is caught by the catch block, which returns the string 'Fetch failed'.

3. Final Answer:

   'Fetch failed' -> Option B

4. Quick Check:

   404 triggers catch, returns 'Fetch failed' = 'Fetch failed' [OK]

Hint: Non-ok response triggers catch block return [OK]

Common Mistakes:

• Assuming JSON data is returned on 404
• Expecting undefined instead of catch return
• Thinking error is unhandled and crashes

4. Identify the error in this Vue HTTP call code:

async function getUser() {
  try {
    const response = await fetch('/user');
    if (response.ok) {
      const user = response.json();
      return user;
    }
  } catch (e) {
    console.error(e);
  }
}

medium

A. Missing await before response.json() causing a Promise to be returned

B. Incorrect use of try...catch block

C. Using response.ok instead of response.status

D. No error, code is correct

Solution

1. Step 1: Check response.json() usage

   The response.json() method returns a Promise, so it must be awaited to get the actual data.

2. Step 2: Identify missing await

   The code returns response.json() without await, so it returns a Promise instead of user data.

3. Final Answer:

   Missing await before response.json() causing a Promise to be returned -> Option A

4. Quick Check:

   Always await response.json() to get data [OK]

Hint: Always await response.json() to get actual data [OK]

Common Mistakes:

• Forgetting to await response.json()
• Thinking response.ok is incorrect usage
• Assuming try...catch is wrongly used

5. You want to show a user-friendly error message in your Vue app when an HTTP call fails. Which approach best combines error handling and accessibility?

hard

A. Log errors to console only without user notification

B. Ignore errors and reload the page automatically

C. Use try...catch to catch errors, set an error message in state, and display it with aria-live="polite" for screen readers

D. Show a popup alert without any ARIA attributes

Solution

1. Step 1: Combine error handling with user feedback

   Using try...catch allows catching errors. Setting an error message in Vue state lets the UI update to inform the user.

2. Step 2: Ensure accessibility with ARIA

   Using aria-live="polite" on the error message container ensures screen readers announce the message politely, improving accessibility.

3. Final Answer:

   Use try...catch to catch errors, set an error message in state, and display it with aria-live="polite" for screen readers -> Option C

4. Quick Check:

   Error handling + aria-live = Use try...catch to catch errors, set an error message in state, and display it with aria-live="polite" for screen readers [OK]

Hint: Use aria-live with error messages for accessibility [OK]

Common Mistakes:

• Ignoring errors or not showing messages
• Using alerts without ARIA support
• Logging errors only without user feedback