← Semua tulisan

Bikin Composable useFetch Sederhana di Vue 3

· 1 min baca ·Vue.jsJavaScriptFrontend
Daftar Isi

Salah satu hal yang saya suka dari Vue 3 Composition API adalah kemudahan membuat composable — logika reusable yang bisa dipakai di banyak komponen. Mari buat useFetch.

Composable-nya

javascript 
import { ref } from 'vue'

export function useFetch(url) {
  const data = ref(null)
  const error = ref(null)
  const loading = ref(true)

  fetch(url)
    .then((res) => res.json())
    .then((json) => (data.value = json))
    .catch((err) => (error.value = err))
    .finally(() => (loading.value = false))

  return { data, error, loading }
}

Cara Pakai di Komponen

vue 
<script setup>
import { useFetch } from '@/composables/useFetch'

const { data, error, loading } = useFetch('/api/v1/posts')
</script>

<template>
  <p v-if="loading">Memuat...</p>
  <p v-else-if="error">Gagal memuat data 😢</p>
  <ul v-else>
    <li v-for="post in data" :key="post.id">{{ post.title }}</li>
  </ul>
</template>

Penutup

Composable membuat kode lebih DRY dan mudah diuji. Kamu bisa kembangkan useFetch ini dengan dukungan refetch(), abort controller, atau caching sesuai kebutuhan project.

Komentar