Fetching Data from the Backend Using Fetch

In modern web development, the interaction between the frontend and the backend serves as the core foundation for building dynamic applications. Whether rendering a list of users, submitting form data, or loading real-time configurations, network requests are indispensable. Within Vue 3 projects, although third-party request libraries like Axios remain widely popular, the native fetch API provided by modern browsers has become a primary choice for lightweight data fetching due to its zero-installation nature, standardized specification, and Promise-based design.

This article explores the general principles of fetching data with fetch in Vue 3 applications from a macro perspective, comparing it with traditional methods and examining its overall application landscape within modern front-end architectures.

In traditional web applications, full-page reloads were the only way to retrieve fresh data. With the rise of Single Page Application (SPA) architectures, asynchronous data interaction has become the mainstream paradigm. The browser's native fetch interface is a direct product of this evolutionary process.

As a Promise-based native API, fetch allows developers to send HTTP requests and handle responses in a more intuitive way that aligns with modern JavaScript asynchronous programming patterns, such as async/await. In a highly modular and component-driven framework like Vue 3, properly integrating network requests with component lifecycles and state management is the key to ensuring both application performance and long-term maintainability.
To better understand the positioning of fetch within the Vue 3 ecosystem, we can compare it with the traditional XMLHttpRequest (XHR) and popular third-party libraries like Axios:

• Compared to XMLHttpRequest:
  • fetch features a cleaner syntax and is built entirely on Promises, eliminating the cumbersome nested callbacks often referred to as "callback hell."
  • fetch provides a more robust and modern abstraction via the Request and Response objects.
• Compared to Axios:
  • Bundle Size and Dependencies: fetch is a built-in browser API requiring no external dependencies, resulting in zero extra bundle size, whereas Axios must be explicitly imported.
  • Feature Richness: Axios comes out-of-the-box with advanced features such as request/response interceptors, automatic JSON data transformation, and client-side XSRF protection. In contrast, fetch is more fundamental, requiring developers to implement custom wrappers for advanced functionalities.
  • Error Handling Mechanism: A fetch Promise only rejects upon network failure. When a server returns an HTTP error status code (such as 4xx or 5xx), fetch still resolves successfully, requiring developers to manually check the response.ok property.

The Data-Fetching Landscape in Vue 3

Fetching data using fetch in Vue 3 extends far beyond simply calling a function; it involves a comprehensive application data flow.

1. Lifecycle and Request Timing

Within the Vue 3 Composition API, data fetching typically occurs during the component mounting phase. We leverage the onMounted hook to trigger fetch requests, ensuring that the DOM has been fully rendered or the component has successfully loaded.

2. Reactive State Management

The data retrieved from the backend needs to be converted into Vue's reactive state (using ref or reactive) so that the view updates automatically whenever the underlying data changes.

3. The Three Pillars of Asynchronous States

A robust data-fetching architecture generally encompasses three core states:

• Loading: Displays a loading spinner or skeleton screen while the request is in flight.
• Data: Stores the content returned by the backend upon a successful request.
• Error: Captures and holds error messages when a request fails or a network exception occurs.

Basic Code Example

Below is a standard practical example of fetching backend data using fetch inside a Vue 3 Single File Component:

<script setup>
import { ref, onMounted } from 'vue'

// Define reactive states
const items = ref([])
const loading = ref(false)
const error = ref(null)

// Asynchronous function to fetch data
const fetchData = async () => {
  loading.value = true
  error.value = null
  
  try {
    const response = await fetch('https://api.example.com/items')
    
    // Check HTTP status code
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`)
    }
    
    // Parse JSON data
    const data = await response.json()
    items.value = data
  } catch (err) {
    error.value = err.message
    console.error('Failed to fetch data:', err)
  } finally {
    loading.value = false
  }
}

// Trigger request when the component is mounted
onMounted(() => {
  fetchData()
})
</script>

<template>
  <div class="data-container">
    <h2>Data List</h2>
    
    <!-- Loading state -->
    <p v-if="loading">Loading...</p>
    
    <!-- Error state -->
    <p v-if="error" class="error">An error occurred: {{ error }}</p>
    
    <!-- Data rendering -->
    <ul v-if="!loading && !error">
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<style scoped>
.error {
  color: red;
}
</style>

Conclusion and Engineering Recommendations

Using fetch to retrieve data from the backend is a fundamental skill in Vue 3 development. For smaller-scale applications or projects prioritizing minimal bundle size, native fetch is an exceptional choice. However, to handle complex enterprise-level projects effectively, it is recommended to build a general-purpose wrapper around native fetch—handling tasks such as a unified base URL, automatic token injection in request headers, and centralized error interception—thereby enhancing code reusability and maintainability.