Error handling in HTTP calls in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the function used for HTTP requests in Vue.

Vue

import { [1] } from '@vueuse/core';

Drag options to blanks, or click blank then click option'

AhttpCall

BuseHttp

CfetchData

DuseFetch

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-existent function like useHttp or fetchData.

Confusing the import with a regular fetch call.

The useFetch function is a common Vue composable for making HTTP requests reactively.

2fill in blank

medium

Complete the code to catch errors from the HTTP call using try and {{BLANK_1}}.

Vue

try {
  const response = await fetch(url);
  // process response
} catch ([1]) {
  console.error(error);
}

Drag options to blanks, or click blank then click option'

Aexception

Bfail

Cerror

Derr

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that is not descriptive or inconsistent.

Leaving the catch parameter empty.

The catch block uses a variable to hold the error object, commonly named error.

3fill in blank

hard

Fix the error in the code to check if the HTTP response was successful using {{BLANK_1}}.

Vue

const response = await fetch(url);
if (!response.[1]) {
  throw new Error('Network response was not ok');
}

Drag options to blanks, or click blank then click option'

Aok

Bstatus

Csuccess

Dvalid

Attempts:

3 left

💡 Hint

Common Mistakes

Using response.status directly without checking the range.

Using non-existent properties like success or valid.

The response.ok property is a boolean indicating if the HTTP status is in the successful range.

4fill in blank

hard

Fill both blanks to handle errors in a Vue component using try and catch.

Vue

async function fetchData() {
  try {
    const data = await fetch(url);
    // process data
  } [1] ([2]) {
    console.error(error);
  }
}

Drag options to blanks, or click blank then click option'

Acatch

Berror

Cfinally

Dexception

Attempts:

3 left

💡 Hint

Common Mistakes

Using finally instead of catch to handle errors.

Using an undefined variable name in catch.

The try block is paired with catch to handle errors, and the error variable is commonly named error.

5fill in blank

hard

Fill all three blanks to create a reactive error state in Vue and update it when an HTTP call fails.

Vue

<script setup>
import { ref } from 'vue';
const error = [1](null);

async function loadData() {
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error('Failed');
  } catch ([2]) {
    error.value = [3].message;
  }
}
</script>

Drag options to blanks, or click blank then click option'

Aref

Berr

Cerror

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-reactive variable for error state.

Mismatching variable names between catch and assignment.

We use ref to create a reactive variable. The catch block uses err as the error variable, and we assign err.message to error.value.