Fetch API in Vue components - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to fetch data when the component is mounted.

Vue

<script setup>
import { ref, onMounted } from 'vue'
const data = ref(null)
onMounted(() => {
  fetch([1])
    .then(response => response.json())
    .then(json => data.value = json)
})
</script>

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

A'/api/items'

B'/api/info'

C'/api/data'

D'/api/users'

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to put the URL in quotes.

Using an incorrect or unrelated URL.

The fetch function requires the URL string as its argument. Here, '/api/data' is the correct endpoint to fetch data.

2fill in blank

medium

Complete the code to handle errors in the fetch call.

Vue

<script setup>
import { ref, onMounted } from 'vue'
const error = ref(null)
onMounted(() => {
  fetch('/api/data')
    .then(response => {
      if (!response.ok) throw new Error('Network error')
      return response.json()
    })
    .catch([1] => error.value = [1].message)
})
</script>

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

Ae

Berror

Cerr

Dexception

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name not declared in the catch block.

Trying to access error.message without a parameter.

The catch block receives an error object, commonly named 'e' here, which holds the error details.

3fill in blank

hard

Fix the error in the fetch call to correctly update the reactive data.

Vue

<script setup>
import { ref, onMounted } from 'vue'
const items = ref([])
onMounted(async () => {
  const response = await fetch('/api/items')
  const json = await response.json()
  items[1] = json
})
</script>

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

A.value

B[0]

C[]

D()

Attempts:

3 left

💡 Hint

Common Mistakes

Assigning directly to the ref variable without '.value'.

Using array or function syntax incorrectly.

In Vue's Composition API, to update a ref's value, you must assign to its '.value' property.

4fill in blank

hard

Fill both blanks to create a reactive loading state during the fetch.

Vue

<script setup>
import { ref, onMounted } from 'vue'
const loading = ref(true)
const data = ref(null)
onMounted(async () => {
  try {
    const response = await fetch('/api/data')
    data.value = await response.json()
  } finally {
    loading[1] = [2]
  }
})
</script>

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

A.value

Bfalse

Ctrue

Dloading

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to use '.value' when updating refs.

Setting loading to true instead of false after fetch.

To update the reactive loading state, assign 'false' to 'loading.value' after fetch completes.

5fill in blank

hard

Fill all three blanks to fetch data and display an error message if fetch fails.

Vue

<script setup>
import { ref, onMounted } from 'vue'
const data = ref(null)
const error = ref(null)
onMounted(async () => {
  try {
    const response = await fetch([1])
    if (!response.ok) throw new Error('Fetch failed')
    data.value = await response.json()
  } catch ([2]) {
    error.value = [3].message
  }
})
</script>

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

A'/api/info'

Berr

Ce

D'/api/data'

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong URL string in fetch.

Using a different variable name in catch block than in error assignment.

The fetch URL is '/api/data'. The catch block uses 'e' as the error parameter to set the error message.