vue 3 fetch API

📡 Artikel 12 dari 16 · Seri Belajar Vue

Fetch Data dari API —
Koneksi Vue 3 ke Backend
dengan Axios & Tampilkan Data Real di UI

Akhirnya! Saatnya aplikasi Vue kamu bisa "ngobrol" dengan server sungguhan. Pelajari cara fetch API Vue 3 menggunakan Axios dan tampilkan data nyata ke UI — bukan data palsu lagi.

#FetchAPIVue3 #AxiosVue3 #BelajarVue #VueFrontEnd #VueFromZeroToZorro

⏱️

Estimasi Baca

12 Menit

🎯

Level

Pemula → Menengah

📅

Tahun

2026

📚

Bagian dari Seri

Vue from Zero to Zorro — 16 Artikel Belajar Vue

Kamu sedang membaca artikel ke-12. Ingin melihat semua topik dari awal sampai mahir? Cek daftar isi lengkap serinya!

🗂️ Lihat Daftar Isi Seri →

Bayangkan kamu sudah susah-payah bikin tampilan Vue yang keren — komponen rapi, state terkelola, routing beres. Tapi datanya masih hardcode di dalam kode. Mana seru? Nah, inilah saatnya kamu belajar fetch API Vue 3: menghubungkan aplikasi kamu ke dunia luar alias backend server yang nyata. Di artikel ke-12 dari seri Vue from Zero to Zorro ini, kita akan pakai axios vue 3 — library HTTP client paling populer — untuk ambil data, tampilkan ke UI, dan tangani loading serta error seperti developer profesional. Siap? Gas! 🚀

🤔 Axios vs Fetch Biasa — Mana yang Lebih Oke untuk Vue 3?

JavaScript sebenarnya sudah punya bawaan namanya fetch() API. Tapi para developer senior kebanyakan pilih Axios. Kenapa? Analogi sederhananya begini:

Fetch bawaan itu seperti naik ojek tanpa aplikasi — bisa, tapi kamu harus negosiasi sendiri, nunggu di pinggir jalan, dan kalau hujan ya urusan kamu. Axios itu seperti punya Grab dengan fitur lengkap: bisa set default header sekalian, interceptor otomatis, error handling yang lebih manusiawi, dan cancel request kalau diperlukan.

📌 Definisi Penting

Axios adalah HTTP client berbasis Promise untuk browser dan Node.js. Ia membungkus XMLHttpRequest dengan API yang bersih, mendukung interceptor, transformasi data otomatis, dan cancel token — jauh lebih ergonomis dibanding fetch() native untuk proyek skala menengah ke atas.

Fitur	fetch() Native	Axios
Parse JSON otomatis	❌ Manual .json()	✅ Otomatis
Error HTTP (4xx/5xx)	❌ Tidak throw error	✅ Langsung throw
Default headers global	❌ Set tiap request	✅ Bisa sekali atur
Interceptors	❌ Tidak ada	✅ Request & Response
Upload progress	⚠️ Susah	✅ Built-in
Browser support lama	⚠️ Butuh polyfill	✅ Aman

🔥 Fakta Menarik

Axios punya lebih dari 100 juta download per minggu di npm. Ini menjadikannya salah satu package JavaScript paling populer sepanjang masa — mengalahkan banyak framework sekalipun!

⚙️ Cara Install dan Setup Axios Vue 3 — Langkah demi Langkah

Oke, cukup teorinya. Sekarang kita praktik! Pastikan kamu sudah punya project Vue 3 yang dibuat dengan Vite (kalau belum, cek artikel-artikel sebelumnya di seri ini ya). Ikuti langkah-langkah berikut:

1

Install Axios via npm

Buka terminal di folder project Vue kamu, lalu jalankan perintah ini:

# npm
npm install axios

# atau pakai yarn
yarn add axios

2

Buat File Konfigurasi Axios (Opsional tapi Direkomendasikan)

Buat file src/api/axios.js untuk konfigurasi terpusat. Ini cara profesional yang bikin kode lebih rapi:

import axios from 'axios'

// Buat instance khusus dengan base URL
const apiClient = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json'
  }
})

export default apiClient

💡 Tips Pro

Gunakan baseURL dari environment variable supaya mudah ganti antara development dan production: import.meta.env.VITE_API_URL. Taruh di file .env di root project kamu.

3

Fetch Data di Komponen Vue dengan onMounted

Buat komponen PostList.vue. Di sini kita pakai Composition API dan ambil data dari JSONPlaceholder (API publik gratis untuk latihan):

<!-- src/components/PostList.vue -->
<template>
  <div class="post-list">
    <h2>📋 Daftar Post</h2>

    <!-- Loading State -->
    <div v-if="loading">⏳ Memuat data...</div>

    <!-- Error State -->
    <div v-else-if="error">❌ {{ error }}</div>

    <!-- Data State -->
    <ul v-else>
      <li v-for="post in posts" :key="post.id">
        <strong>{{ post.title }}</strong>
        <p>{{ post.body }}</p>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import apiClient from '../api/axios'

const posts = ref([])
const loading = ref(false)
const error = ref(null)

const fetchPosts = async () => {
  loading.value = true
  error.value = null
  try {
    const { data } = await apiClient.get('/posts?_limit=5')
    posts.value = data
  } catch (err) {
    error.value = 'Gagal memuat data. Coba lagi!'
    console.error(err)
  } finally {
    loading.value = false
  }
}

onMounted(fetchPosts)
</script>

⚡ Insight Penting — Kenapa try/catch/finally?

• try — jalankan request, simpan data kalau berhasil
• catch — tangkap error (network mati, server 500, dll)
• finally — selalu dijalankan, cocok untuk matikan loading spinner

Pola ini adalah gold standard untuk semua operasi async di Vue 3!

🎨 Tampilkan Data Real di UI — Loading State, Error Handling & UX Terbaik

Fetch data berhasil itu bagus. Tapi user experience yang baik juga butuh: loading spinner saat nunggu, pesan error yang informatif, dan tampilan data yang bersih. Di sinilah Vue 3 bersinar — reaktivitasnya bikin semua ini semudah ganti nilai variabel!

4

Tambahkan Skeleton Loading yang Keren

Ganti teks "⏳ Memuat data..." dengan skeleton placeholder menggunakan CSS sederhana:

<!-- Di template, ganti loading div -->
<div v-if="loading" class="skeleton-wrapper">
  <div
    v-for="n in 5"
    :key="n"
    style="height:60px;background:#e2e8f0;border-radius:8px;margin-bottom:12px;animation:pulse 1.5s infinite"
  ></div>
</div>

5

POST Request — Kirim Data ke Server

Tidak cuma ambil data, Axios juga bisa kirim data. Contoh membuat post baru:

const createPost = async () => {
  try {
    const { data } = await apiClient.post('/posts', {
      title: 'Post dari Vue 3',
      body: 'Ini dikirim pakai Axios!',
      userId: 1
    })
    console.log('Post baru:', data)
    // tambahkan ke array posts lokal
    posts.value.unshift(data)
  } catch (err) {
    console.error('Gagal buat post:', err)
  }
}

📊 Analisis — Kapan Pakai Method Apa?

📥

GET

Ambil data dari server

📤

POST

Kirim / buat data baru

✏️

PUT / PATCH

Update data yang ada

🗑️

DELETE

Hapus data di server

🛡️ Axios Interceptors — Fitur Rahasia yang Bikin Fetch API Vue 3 Makin Powerful

Interceptors itu seperti "petugas keamanan" di antara kamu dan server. Setiap request yang keluar bisa "dicegat" dulu — misalnya buat nambahin token autentikasi otomatis. Setiap response yang masuk pun bisa diproses dulu — misalnya handle error 401 (Unauthorized) secara global.

6

Setup Request & Response Interceptors

Tambahkan ini di file src/api/axios.js:

// Interceptor REQUEST — tambah token otomatis
apiClient.interceptors.request.use(
  config => {
    const token = localStorage.getItem('auth_token')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  }
)

// Interceptor RESPONSE — handle error global
apiClient.interceptors.response.use(
  response => response,
  error => {
    if (error.response?.status === 401) {
      console.warn('Session habis, arahkan ke login')
      // router.push('/login')
    }
    return Promise.reject(error)
  }
)

⚠️ Perhatian

Jangan pernah hardcode token atau credentials langsung di kode! Selalu simpan di environment variable (.env) atau ambil dari state management (Pinia — yang sudah kamu pelajari di artikel 11). Ini bukan paranoid, ini standar keamanan industri.

💡 Tips — Kombinasikan dengan Pinia!

Taruh logika fetch Axios di dalam Pinia store action, bukan langsung di komponen. Dengan begitu data yang berhasil di-fetch bisa diakses dari mana saja di aplikasimu — dan kode komponenmu tetap bersih. Ini pola yang dipakai hampir semua Vue developer profesional!

✅ Kesimpulan

Kamu Sekarang Bisa Bikin Vue 3 "Ngobrol" dengan Server!

Di artikel ini kamu telah belajar bagaimana cara fetch API Vue 3 menggunakan axios vue 3 dengan cara yang benar. Berikut poin-poin utamanya:

• ✓ Axios lebih unggul dari fetch native karena parse JSON otomatis, error handling lebih baik, dan support interceptors
• ✓ Buat instance Axios terpusat di src/api/axios.js dengan baseURL dan default headers
• ✓ Gunakan pola try/catch/finally dengan state loading dan error untuk UX yang baik
• ✓ Interceptors memungkinkan kamu otomatis menambah auth token dan handle error HTTP global
• ✓ Kombinasikan Axios dengan Pinia untuk arsitektur aplikasi yang bersih dan scalable

Artikel ini adalah bagian dari seri 16 Artikel Belajar Vue: Vue From Zero to Zorro. Artikel selanjutnya kita akan bahas Composables — cara bikin logika yang bisa dipakai ulang di banyak komponen. Ini fitur yang akan membuat kode Vue kamu jauh lebih rapi dan profesional!

💬 Ada Pertanyaan atau Feedback?

Yuk diskusi bareng! Tulis di kolom komentar: bagian mana dari Axios yang masih bikin bingung? Atau kalau artikel ini membantu, share ke teman-teman yang lagi belajar Vue — bisa jadi ibadah ilmu lho! 🙏

💬 Tulis Komentar 📚 Lihat Semua Artikel Seri

🏷️ Tags Artikel

#FetchAPIVue3 #AxiosVue3 #BelajarVue #VueFrontEnd #VueFromZeroToZorro #Vue3Tutorial #CompositionAPI #HTTPClient

📖 Navigasi Seri

← Artikel Sebelumnya

State Management dengan Pinia — Simpan Data Global Supaya Semua Komponen Bisa Akses

→ Baca Artikel Sebelumnya

Artikel Selanjutnya →

Composables — Bikin Logika yang Bisa Dipakai Ulang

→ Baca Artikel Selanjutnya