GET requests in components in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the function used to make HTTP GET requests in Vue components.

Vue

<script setup>
import axios from '[1]'
</script>

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

Avue

Bvue-router

Cpinia

Daxios

Attempts:

3 left

💡 Hint

Common Mistakes

Importing from 'vue' instead of 'axios'.

Using 'vue-router' which is for routing, not HTTP requests.

Axios is a popular library to make HTTP requests, including GET requests, in Vue components.

2fill in blank

medium

Complete the code to define a reactive variable to store data fetched from a GET request.

Vue

<script setup>
import { ref } from 'vue'
const data = [1]([])
</script>

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

Areactive

Bcomputed

Cref

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive([]) which creates a reactive object, but ref([]) is simpler for arrays.

Using computed which is for derived values.

The ref function creates a reactive variable that can hold any value, including arrays.

3fill in blank

hard

Fix the error in the code to correctly fetch data with axios inside the onMounted lifecycle hook.

Vue

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
const users = ref([])
onMounted(async () => {
  const response = await axios.[1]('https://api.example.com/users')
  users.value = response.data
})
</script>

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

Aget

Brequest

Cfetch

Dpost

Attempts:

3 left

💡 Hint

Common Mistakes

Using axios.post which sends data instead of fetching.

Using axios.fetch which does not exist.

The axios.get method is used to make GET requests to fetch data.

4fill in blank

hard

Fill both blanks to create a GET request inside the onMounted hook and assign the result to a reactive variable.

Vue

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
const posts = ref([])
onMounted(async () => {
  const response = await axios.[1]('https://api.example.com/posts')
  posts.[2] = response.data
})
</script>

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

Aget

Bpost

Cvalue

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Using axios.post instead of get.

Assigning directly to posts instead of posts.value.

Use axios.get to fetch data and assign it to the reactive variable's value property.

5fill in blank

hard

Fill all three blanks to fetch data with axios, handle errors, and update reactive variables accordingly.

Vue

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
const items = ref([])
const error = ref(null)
onMounted(async () => {
  try {
    const response = await axios.[1]('https://api.example.com/items')
    items.[2] = response.[3]
  } catch (err) {
    error.value = err.message
  }
})
</script>

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

Aget

Bvalue

Cdata

Dpost

Attempts:

3 left

💡 Hint

Common Mistakes

Using axios.post instead of get.

Assigning response directly instead of response.data.

Updating items instead of items.value.

Use axios.get to fetch data, assign response.data to items.value, and catch errors to update error.value.

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