Snippet

Asynchronous Fetch Error Handling in Setup

Using try/catch inside async functions ensures network failures or bad HTTP response statuses are captured gracefully and reflected in reactive error states instead of breaking the script execution.

snippet.js

javascript

import { ref } from 'vue';
 
const user = ref(null);
const errorMessage = ref(null);
 
async function loadUserData(userId) {
  try {
    errorMessage.value = null;
    const res = await fetch(`/api/user/${userId}`);
    if (!res.ok) {
      throw new Error('Network response failed');
    }
    user.value = await res.json();
  } catch (err) {
    errorMessage.value = err.message;
  }
}

vue

Breakdown

try {

Begins a guarded block to monitor asynchronous operations for runtime exceptions.

if (!res.ok) { throw new Error('Network response failed'); }

Manually triggers an error when the server returns an unsuccessful HTTP status code.

user.value = await res.json();

Parses JSON payload on success and assigns it to the reactive user reference.

} catch (err) { errorMessage.value = err.message; }

Handles any caught errors by saving the error description into reactive state.

Previous snippet Next snippet

More Beginner JavaScript exercises →

Asynchronous Fetch Error Handling in Setup

Related