Fetching Data — CompileDaily Study

Penjelasan

Mengambil data dari API di Vue biasanya dilakukan lewat fetch() di dalam onMounted(), dikombinasikan dengan ref() terpisah untuk data, loading, dan error — supaya UI bisa menampilkan indikator loading atau pesan error dengan tepat.

Contoh Konsep

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

const produk = ref([]);
const loading = ref(true);
const error = ref(null);

onMounted(async () => {
    try {
        const res = await fetch('https://api.contoh.com/produk');
        produk.value = await res.json();
    } catch (err) {
        error.value = err.message;
    } finally {
        loading.value = false;
    }
});
</script>

<template>
    <p v-if="loading">Memuat...</p>
    <p v-else-if="error">Error: {{ error }}</p>
    <ul v-else>
        <li v-for="item in produk" :key="item.id">{{ item.nama }}</li>
    </ul>
</template>

Praktikum

Buat komponen DaftarArtikel.vue dengan ref() artikel, loading, dan error. Di onMounted() (async), fetch dari 'https://api.contoh.com/artikel', tangani sukses dan gagal, lalu tampilkan kondisional sesuai ketiga ref itu.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

onMounted() BOLEH menerima fungsi async langsung (seperti dicontohkan di atas) — beda dengan useEffect di React yang TIDAK BOLEH langsung async, harus dibungkus fungsi async terpisah di dalamnya.