Fetch API in Vue components - Step-by-Step Execution

Concept Flow - Fetch API in Vue components

Component Mounted

↓

Call fetch()

↓

Send HTTP Request

↓

Wait for Response

↓

Receive Response

↓

Parse JSON Data

↓

Update Component State

↓

Re-render Component with Data

When the Vue component mounts, it calls fetch to get data from a server, waits for the response, parses it, updates the component's state, and then re-renders to show the new data.

Execution Sample

Vue

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const data = ref(null);
    onMounted(async () => {
      const res = await fetch('https://api.example.com/data');
      data.value = await res.json();
    });
    return { data };
  }
}

This Vue component fetches JSON data from an API when it mounts and stores it in a reactive variable.

Execution Table

Step	Action	Fetch Promise State	Response Data	Component State (data.value)	Component Render
1	Component mounts, onMounted runs	pending	none	null	Shows loading or empty state
2	fetch() sends HTTP request	pending	none	null	Still loading
3	Response received	fulfilled	{"name":"Vue"}	null	Still loading, waiting for JSON parse
4	Parse JSON with res.json()	fulfilled	{"name":"Vue"}	null	Still loading
5	Assign parsed JSON to data.value	fulfilled	{"name":"Vue"}	{"name":"Vue"}	Triggers re-render
6	Component re-renders with new data	fulfilled	{"name":"Vue"}	{"name":"Vue"}	Shows data on screen
7	No more updates	fulfilled	{"name":"Vue"}	{"name":"Vue"}	Stable display

💡 Fetch completes and data.value is set, component stops updating until next change.

Variable Tracker

Variable	Start	After Step 1	After Step 3	After Step 5	Final
data.value	null	null	null	{"name":"Vue"}	{"name":"Vue"}
fetch Promise	not started	pending	fulfilled	fulfilled	fulfilled

Key Moments - 3 Insights

Why is data.value null even after the fetch request is sent?

Because fetch is asynchronous, data.value stays null until the response is received and parsed (see execution_table steps 2-4).

What triggers the component to re-render with new data?

Assigning the parsed JSON to data.value updates the reactive variable, which triggers Vue to re-render (see execution_table step 5).

Why do we use onMounted for fetch instead of calling fetch directly in setup?

onMounted ensures the fetch runs after the component is mounted, avoiding issues with server-side rendering or premature calls.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of data.value at Step 3?

A null

B {"name":"Vue"}

C pending

D undefined

💡 Hint

Check the 'Component State (data.value)' column at Step 3 in the execution_table.

At which step does the component re-render with the fetched data?

A Step 2

B Step 4

C Step 5

D Step 7

💡 Hint

Look for the step where 'Component Render' mentions 'Triggers re-render'.

If the fetch URL was incorrect and failed, what would change in the execution table?

A Fetch Promise would stay pending forever

B Response Data would be empty and data.value would remain null

C Component would re-render with error data automatically

D data.value would be set to an empty object

💡 Hint

Consider what happens when fetch fails and no JSON is assigned to data.value.

Concept Snapshot

Fetch API in Vue Components:
- Use onMounted() to run fetch after component mounts
- fetch() returns a promise; await response and parse JSON
- Store data in a reactive ref variable
- Updating ref triggers component re-render
- Handle loading and errors for good UX

Full Transcript

This visual trace shows how a Vue component uses the Fetch API to get data. When the component mounts, it calls fetch to send an HTTP request. The fetch promise is pending while waiting for the server response. Once the response arrives, the component parses the JSON data and assigns it to a reactive variable called data.value. This assignment triggers Vue to re-render the component, showing the new data on screen. The variable tracker shows data.value starts as null and updates only after the fetch completes. Key moments clarify why data.value is null before the fetch finishes and what triggers the re-render. The quiz tests understanding of data state at different steps and what happens if fetch fails.