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)



  

Need a 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('')



  

Need a 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()



  

Need a 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 }}

Need a hint?

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