Composable for API calls (useFetch pattern) in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Vue Composition API function needed to create reactive references.

Vue

import { [1] } from 'vue';

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

Areactive

Bref

Ccomputed

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of ref for simple values.

Importing computed or watch which serve different purposes.

The ref function creates a reactive reference, which is essential for storing reactive data like API responses.

2fill in blank

medium

Complete the code to define the composable function that fetches data from an API.

Vue

export function useFetch(url) {
  const data = ref(null);
  const error = ref(null);

  async function fetchData() {
    try {
      const response = await fetch([1]);
      data.value = await response.json();
    } catch (err) {
      error.value = err;
    }
  }

  fetchData();

  return { data, error };
}

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

Aurl

BfetchData

Cdata

Derror

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the data ref instead of the URL string.

Using the function name or error ref as the fetch argument.

The fetch function needs the URL string to make the API call, which is passed as the url parameter.

3fill in blank

hard

Fix the error in the code by completing the line that returns the reactive data and error from the composable.

Vue

return { [1] };

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

Adata, error

Bdata.error

Cdata; error

Ddata error

Attempts:

3 left

💡 Hint

Common Mistakes

Using dot notation which is invalid here.

Separating variables with semicolons or spaces instead of commas.

Returning an object with data and error properties allows components to access both reactive references.

4fill in blank

hard

Fill both blanks to create a reactive reference and initialize it with null.

Vue

const [1] = [2](null);

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

Aref

Breactive

Cdata

Derror

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping variable name and function.

Using reactive instead of ref for simple values.

data is the variable name holding the reactive reference created by ref initialized with null.

5fill in blank

hard

Fill all three blanks to handle errors reactively and return both data and error from the composable.

Vue

const [1] = [2](null);

return { [3], error };

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

Adata

Bref

Derror

Attempts:

3 left

💡 Hint

Common Mistakes

Returning undefined variables.

Mixing up variable names and functions.

We create a reactive data reference using ref and return it along with error so components can react to both.