Composable for API calls (useFetch pattern) in Vue - Step-by-Step Execution

Concept Flow - Composable for API calls (useFetch pattern)

Component calls useFetch

↓

useFetch starts: set loading=true

↓

Send fetch request

↓

Wait for response

↓

If success: set data, loading=false

↓

If error: set error, loading=false

↓

Component reacts to data/error changes

The component calls the composable, which starts loading and sends a fetch request. When the response arrives, it updates data or error and stops loading. The component updates accordingly.

Execution Sample

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 };
}

This composable fetches data from the given URL and tracks loading, data, and error states.

Execution Table

Step	Action	State Before	State After	Notes
1	Call useFetch with URL	data=null, error=null, loading=undefined	data=null, error=null, loading=true	Loading starts
2	Send fetch request	loading=true	loading=true	Waiting for response
3	Receive response (success)	data=null, loading=true	data=JSON data, loading=false	Data set, loading ends
4	Component reads data	data=JSON data	data=JSON data	Component updates UI
5	If error occurs	error=null, loading=true	error=error message, loading=false	Error set, loading ends
6	Component reads error	error=error message	error=error message	Component shows error
7	Exit	loading=false	loading=false	Fetch complete, no more changes

💡 Fetch completes either with data or error, loading becomes false, stopping further updates.

Variable Tracker

Variable	Start	After Step 1	After Step 3 (success)	After Step 5 (error)	Final
data	null	null	JSON data	null	JSON data or null
error	null	null	null	error message	null or error message
loading	undefined	true	false	false	false

Key Moments - 3 Insights

Why does loading start as true immediately after calling useFetch?

Loading is set to true right after calling useFetch to show the component that data is being fetched. See execution_table step 1 where loading changes from undefined to true.

What happens if the fetch request fails?

If fetch fails, error is set with the error message and loading becomes false, as shown in execution_table step 5. The component can then show the error.

Why does the component update when data or error changes?

Because data, error, and loading are reactive refs, Vue tracks their changes and updates the component automatically, as seen in steps 4 and 6.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of loading after step 3?

A false

B true

C null

D undefined

💡 Hint

Check the 'State After' column in step 3 where loading changes after data is set.

At which step does the error variable get a value?

A Step 2

B Step 5

C Step 3

D Step 4

💡 Hint

Look for the step where error changes from null to an error message in the execution_table.

If the fetch request takes longer, which variable stays true longer?

A data

B error

C loading

D url

💡 Hint

Refer to variable_tracker and execution_table steps showing loading true during fetch.

Concept Snapshot

Composable useFetch pattern:
- Call useFetch(url) in component
- Returns reactive refs: data, error, loading
- loading=true while fetching
- On success: data set, loading=false
- On error: error set, loading=false
- Component auto-updates on ref changes

Full Transcript

This visual execution shows how a Vue composable called useFetch works step-by-step. When a component calls useFetch with a URL, it sets loading to true and sends a fetch request. While waiting, loading stays true. When the response arrives successfully, data is set with the JSON result and loading becomes false. If an error happens, error is set with the message and loading becomes false. The component watches these reactive variables and updates its display automatically. The execution table tracks each step's state changes, and the variable tracker shows how data, error, and loading change over time. Key moments clarify why loading starts true, what happens on error, and how reactivity triggers UI updates. The quiz tests understanding of loading state, error assignment, and fetch timing.