GET requests in components in Vue - Step-by-Step Execution

Concept Flow - GET requests in components

Component starts

↓

Setup function runs

↓

Trigger GET request

↓

Fetch data from server

↓

Update reactive state

↓

Component re-renders with data

↓

User sees updated content

This flow shows how a Vue component triggers a GET request during setup, updates its state with the fetched data, and re-renders to show the new content.

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 data from an API when it mounts and stores it in a reactive variable to display.

Execution Table

Step	Action	State Before	State After	Output/Effect
1	Component setup starts	data = null	data = null	Component prepares reactive state
2	onMounted hook registered	data = null	data = null	Ready to fetch after mount
3	Component mounts	data = null	data = null	Trigger onMounted callback
4	Fetch GET request sent	data = null	data = null	Waiting for server response
5	Response received	data = null	data = {json data}	Data stored in reactive variable
6	Component re-renders	data = {json data}	data = {json data}	UI updates to show fetched data
7	User sees updated content	data = {json data}	data = {json data}	Data displayed on screen

💡 Data fetched and reactive state updated, component finished rendering with new data.

Variable Tracker

Variable	Start	After Step 3	After Step 5	Final
data	null	null	{json data}	{json data}

Key Moments - 3 Insights

Why does the data variable start as null and then change?

The data variable is initially null because no data is loaded yet. After the GET request completes (see step 5 in execution_table), the data variable updates with the fetched JSON, triggering the component to re-render.

Why do we use onMounted to trigger the GET request?

Using onMounted ensures the GET request runs only after the component is fully loaded in the browser, preventing errors and ensuring the UI is ready to update with the fetched data (see step 3 and 4).

What happens if the GET request takes time to respond?

The component shows no data (null) until the response arrives. Once the data is received (step 5), the reactive state updates and the UI refreshes automatically.

Visual Quiz - 3 Questions

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

A null

B {json data}

C undefined

D empty string

💡 Hint

Check the 'State After' column for step 3 in the execution_table.

At which step does the component update its UI with the fetched data?

A Step 4

B Step 6

C Step 5

D Step 7

💡 Hint

Look for the step where 'Component re-renders' and UI updates happen in the execution_table.

If the GET request URL changes, which step in the execution_table would be directly affected?

A Step 6

B Step 2

C Step 4

D Step 7

💡 Hint

Step 4 is when the fetch GET request is sent; changing the URL affects this step.

Concept Snapshot

Vue GET requests in components:
- Use onMounted() to run code after component loads
- Use fetch() with await to get data
- Store data in a reactive ref variable
- Updating ref triggers component re-render
- Display data reactively in template

Full Transcript

This visual trace shows how a Vue component performs a GET request. When the component starts, it sets a reactive variable 'data' to null. The onMounted hook waits until the component is fully loaded, then sends a fetch GET request to the server. While waiting, 'data' remains null. When the response arrives, the JSON data is stored in 'data'. This update triggers Vue to re-render the component, showing the new data on screen. This process ensures data loads smoothly after the component is ready, and the UI updates automatically when data arrives.

Practice

1. What is the main purpose of making a GET request inside a Vue component?

easy

A. To delete data on the server

B. To send data from the component to the server

C. To fetch data from a server to display in the component

D. To update the component's local state without server interaction

Solution

1. Step 1: Understand GET request purpose

   A GET request is used to retrieve or fetch data from a server.

2. Step 2: Relate to Vue component usage

   In Vue components, GET requests are used to get data to show in the UI.

3. Final Answer:

   To fetch data from a server to display in the component -> Option C

4. Quick Check:

   GET request = fetch data [OK]

Hint: GET requests retrieve data to show in components [OK]

Common Mistakes:

• Confusing GET with POST (sending data)
• Thinking GET updates local state only
• Mixing GET with delete operations

2. Which of the following is the correct way to import and use the lifecycle hook to run code after a Vue component mounts for a GET request?

easy

A. import { mounted } from 'vue'; mounted(() => { /* fetch code */ });

B. import { onLoad } from 'vue'; onLoad(() => { /* fetch code */ });

C. import { useMounted } from 'vue'; useMounted(() => { /* fetch code */ });

D. import { onMounted } from 'vue'; onMounted(() => { /* fetch code */ });

Solution

1. Step 1: Identify correct lifecycle hook name

   The correct Vue 3 lifecycle hook to run code after component mounts is onMounted.

2. Step 2: Confirm import and usage syntax

   You import it from 'vue' and call it with a function: onMounted(() => { ... }).

3. Final Answer:

   import { onMounted } from 'vue'; onMounted(() => { /* fetch code */ }); -> Option D

4. Quick Check:

   Use onMounted for post-mount code [OK]

Hint: Use onMounted from 'vue' to run code after mount [OK]

Common Mistakes:

• Using wrong hook names like mounted or onLoad
• Forgetting to import onMounted
• Calling lifecycle hooks incorrectly

3. Given this Vue <script setup> snippet, what will be logged to the console after the component mounts?

import { onMounted } from 'vue';

onMounted(async () => {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log(data.message);
});

Assuming the server responds with { "message": "Hello Vue" }.

medium

A. undefined

B. "Hello Vue"

C. SyntaxError

D. An empty object {}

Solution

1. Step 1: Understand fetch and JSON parsing

   The fetch call gets the response, and response.json() parses it into an object.

2. Step 2: Access the message property

   The parsed object has a message key with value "Hello Vue", so console.log(data.message) prints "Hello Vue".

3. Final Answer:

   "Hello Vue" -> Option B

4. Quick Check:

   Fetch JSON message logs "Hello Vue" [OK]

Hint: Fetch + json() returns object; access keys to log values [OK]

Common Mistakes:

• Forgetting to await response.json()
• Logging response instead of parsed data
• Expecting syntax errors from correct async code

4. What is wrong with this Vue <script setup> code that tries to fetch data on mount?

import { onMounted } from 'vue';

onMounted(() => {
  const response = fetch('https://api.example.com/data');
  const data = response.json();
  console.log(data);
});

medium

A. Missing async/await causing response and data to be Promises

B. Using onMounted instead of created hook

C. fetch URL is invalid syntax

D. console.log should be inside a separate function

Solution

1. Step 1: Identify async usage problem

   fetch returns a Promise, so response is a Promise, not the actual response.

2. Step 2: Explain consequence of missing await

   Calling response.json() on a Promise causes data to be a Promise too, so logging it shows a Promise object, not data.

3. Final Answer:

   Missing async/await causing response and data to be Promises -> Option A

4. Quick Check:

   Always await fetch and json() [OK]

Hint: Always use async/await with fetch to get real data [OK]

Common Mistakes:

• Not marking onMounted callback async
• Not awaiting fetch and json() calls
• Expecting immediate data without Promises

5. You want to fetch user data from an API and show a loading message while waiting. Which Vue <script setup> code correctly handles loading, success, and error states for a GET request?

hard

A. import { ref, onMounted } from 'vue';
const user = ref(null);
const loading = ref(true);
const error = ref(null);
onMounted(async () => {
try {
const res = await fetch('https://api.example.com/user');
if (!res.ok) throw new Error('Fetch failed');
user.value = await res.json();
} catch (e) {
error.value = e.message;
} finally {
loading.value = false;
}
});

B. import { ref, onMounted } from 'vue';
const user = ref(null);
const loading = false;
const error = null;
onMounted(() => {
fetch('https://api.example.com/user')
.then(res => res.json())
.then(data => user.value = data)
.catch(e => error = e.message);
loading = false;
});

C. import { reactive, onMounted } from 'vue';
const state = reactive({ user: null, loading: false, error: null });
onMounted(async () => {
const res = await fetch('https://api.example.com/user');
state.user = await res.json();
state.loading = false;
});

D. import { ref, onMounted } from 'vue';
const user = ref(null);
const loading = ref(false);
const error = ref(null);
onMounted(async () => {
loading.value = true;
const res = await fetch('https://api.example.com/user');
user.value = await res.json();
loading.value = false;
});

Solution

1. Step 1: Check reactive state setup

   import { ref, onMounted } from 'vue'; const user = ref(null); const loading = ref(true); const error = ref(null); onMounted(async () => { try { const res = await fetch('https://api.example.com/user'); if (!res.ok) throw new Error('Fetch failed'); user.value = await res.json(); } catch (e) { error.value = e.message; } finally { loading.value = false; } }); uses ref for user, loading, and error, properly reactive for Vue.

2. Step 2: Verify async fetch with error handling

   import { ref, onMounted } from 'vue'; const user = ref(null); const loading = ref(true); const error = ref(null); onMounted(async () => { try { const res = await fetch('https://api.example.com/user'); if (!res.ok) throw new Error('Fetch failed'); user.value = await res.json(); } catch (e) { error.value = e.message; } finally { loading.value = false; } }); uses async/await with try/catch/finally to handle success, errors, and loading state correctly.

3. Final Answer:

   Option A correctly manages loading, success, and error states with reactive refs and proper async handling. -> Option A

4. Quick Check:

   Use refs + async try/catch/finally for GET with states [OK]

Hint: Use refs and try/catch/finally for loading and error states [OK]

Common Mistakes:

• Not using reactive refs for loading and error
• Setting loading false too early or outside async flow
• Ignoring error handling in fetch