Error handling in HTTP calls in Vue - Mini Project: Build & Apply

Error handling in HTTP calls

📖 Scenario: You are building a simple Vue app that fetches user data from a server. Sometimes the server might fail or the network might be down. You want to show a friendly error message when this happens.

🎯 Goal: Create a Vue component that fetches user data from an API and shows an error message if the fetch fails.

📋 What You'll Learn

Use Vue 3 Composition API with <script setup>

Create a reactive variable to hold user data

Create a reactive variable to hold error messages

Use fetch to get data from https://jsonplaceholder.typicode.com/users/1

Handle errors using try...catch

Display user name if fetch succeeds

Display error message if fetch fails

💡 Why This Matters

🌍 Real World

Handling errors in HTTP calls is essential for building reliable web apps that communicate with servers. Users get clear feedback when something goes wrong.

💼 Career

Web developers often need to fetch data from APIs and handle errors gracefully to improve user experience and app stability.

1

Setup reactive user data variable

In a Vue component with <script setup>, create a reactive variable called user initialized to null.

Vue

import { ref } from 'vue'

// Create a reactive variable called user and set it to null
const user = ref(null)



  

Hint

Use ref(null) to create a reactive variable for user data.

2

Setup reactive error message variable

Add a reactive variable called errorMessage initialized to an empty string '' inside the <script setup>.

Vue

import { ref } from 'vue'

const user = ref(null)
// Create a reactive variable called errorMessage and set it to an empty string
const errorMessage = ref('')



  

Hint

Use ref('') to create a reactive variable for error messages.

3

Fetch user data with error handling

Inside <script setup>, write an async function called fetchUser that uses try...catch to fetch data from 'https://jsonplaceholder.typicode.com/users/1'. On success, set user.value to the JSON response. On error, set errorMessage.value to 'Failed to load user data.'. Then call fetchUser() immediately.

Vue

import { ref } from 'vue'

const user = ref(null)
const errorMessage = ref('')

// Write async function fetchUser with try...catch to fetch user data
async function fetchUser() {
  // Your code here
}

// Call fetchUser immediately
fetchUser()



  

Hint

Use try...catch to handle errors from fetch. Set user.value on success and errorMessage.value on failure.

4

Display user name or error message in template

In the <template>, add code to show the user's name inside a <p> if user is not null. If errorMessage is not empty, show it inside a <p> with aria-live="polite" for accessibility.

Vue

import { ref } from 'vue'

const user = ref(null)
const errorMessage = ref('')

async function fetchUser() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users/1')
    if (!response.ok) throw new Error('Network response was not ok')
    const data = await response.json()
    user.value = data
  } catch (error) {
    errorMessage.value = 'Failed to load user data.'
  }
}

fetchUser()



  
  User Name: {{ user.name }}
  
  {{ errorMessage }}

Hint

Use v-if to conditionally show user name or error message. Add aria-live="polite" to the error message for screen readers.

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