Composable for API calls (useFetch pattern) in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Vue composable return after a successful fetch?

Consider this Vue 3 composable using the useFetch pattern. What will the data ref contain after the fetch completes successfully?

Vue

import { ref } from 'vue';

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

  fetch(url)
    .then(res => res.json())
    .then(json => {
      data.value = json;
      loading.value = false;
    })
    .catch(err => {
      error.value = err.message;
      loading.value = false;
    });

  return { data, error, loading };
}

A A ref containing the parsed JSON response from the API

B A ref containing the raw Response object from fetch

C A ref containing an error message string

D A ref containing the fetch Promise object

💡 Hint

Think about what res.json() returns and what is assigned to data.value.

The composable calls fetch and then parses the response as JSON. The parsed JSON is assigned to data.value. So after success, data contains the API data.

❓ state_output

intermediate

What is the value of loading after fetch fails?

In the same useFetch composable, what will the loading ref value be if the fetch call fails (e.g., network error)?

Vue

import { ref } from 'vue';

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

  fetch(url)
    .then(res => res.json())
    .then(json => {
      data.value = json;
      loading.value = false;
    })
    .catch(err => {
      error.value = err.message;
      loading.value = false;
    });

  return { data, error, loading };
}

A false

B true

C null

D undefined

💡 Hint

Check what happens to loading.value in the catch block.

When fetch fails, the catch block sets loading.value to false to indicate loading is done despite the error.

📝 Syntax

advanced

Which option correctly adds an abort controller to cancel fetch?

You want to add an AbortController to the useFetch composable to cancel the fetch request if needed. Which option correctly implements this?

Vue

import { ref } from 'vue';

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

  // Add abort controller here

  fetch(url, { signal: controller.signal })
    .then(res => res.json())
    .then(json => {
      data.value = json;
      loading.value = false;
    })
    .catch(err => {
      if (err.name === 'AbortError') {
        error.value = 'Fetch aborted';
      } else {
        error.value = err.message;
      }
      loading.value = false;
    });

  return { data, error, loading, controller };
}

A const controller = AbortController();

B const controller = new AbortController();

C const controller = new AbortController;

D const controller = AbortController;

💡 Hint

Remember how to correctly instantiate a class in JavaScript.

The AbortController must be instantiated with new AbortController(). Omitting new or parentheses causes errors.

🔧 Debug

advanced

Why does this composable never update data?

Look at this composable code. Why does data remain null even after the fetch completes?

Vue

import { ref } from 'vue';

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

  async function fetchData() {
    try {
      const res = await fetch(url);
      const json = await res.json();
      data = json;
      loading.value = false;
    } catch (err) {
      error.value = err.message;
      loading.value = false;
    }
  }

  fetchData();

  return { data, error, loading };
}

A Because error is not handled

B Because fetch is not awaited properly

C Because loading is never set to false

D Because 'data = json;' overwrites the ref instead of setting 'data.value'

💡 Hint

Remember how to update a Vue ref's value.

Assigning directly to data replaces the ref variable instead of updating its reactive value. The correct way is data.value = json;.

🧠 Conceptual

expert

Why use a composable for API calls in Vue 3?

What is the main advantage of using a composable like useFetch for API calls in Vue 3 applications?

A It replaces the need for Vuex or Pinia state management

B It automatically caches API responses without extra code

C It allows reusing reactive fetching logic across multiple components easily

D It forces all API calls to be synchronous

💡 Hint

Think about code reuse and reactive state in Vue 3.

Composables encapsulate logic and reactive state, making it easy to reuse API fetching logic in many components without duplication.