Implementasi Fetch Data di Frontend dari Backend - Perwira Learning Center Rencana

Konsep Fetch Data

Fetch data adalah proses meminta (request) data dari sumber eksternal—umumnya API—dan menerima balasan (response) untuk ditampilkan di antarmuka. Proses ini bersifat asinkron, artinya aplikasi tidak berhenti menunggu; UI tetap responsif sementara data sedang diambil.

Analogi: Bayangkan sebuah restoran. Anda (user) duduk di meja dan memesan makanan melalui pelayan (frontend). Pelayan tidak memasak sendiri, melainkan pergi ke dapur (backend) untuk mengambil pesanan yang sudah siap. Tindakan pelayan berjalan ke dapur dan kembali dengan makanan itulah yang disebut fetch.

Cara Kerja Request-Response

Siklusnya sederhana:

• Frontend mengirim HTTP Request ke URL endpoint API (misal: GET /api/products).
• Backend menerima, memproses (mengambil dari database), lalu mengembalikan HTTP Response berisi status code (200 OK, 404 Not Found) dan data (biasanya JSON).
• Frontend menerima response, mengecek apakah sukses, lalu mengolah data.

[Frontend] --(HTTP Request)--> [API Backend]
[Frontend] <--(HTTP Response)-- [API Backend]

Penggunaan Fetch API dan Axios

Kita bisa memilih salah satu. Berikut contoh penggunaan dalam komponen React.

Menggunakan Fetch API bawaan:

import { useState, useEffect } from 'react';

function ProductList() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/products')
      .then(response => {
        if (!response.ok) throw new Error('Gagal mengambil data');
        return response.json();
      })
      .then(data => setProducts(data))
      .catch(error => console.error(error));
  }, []);

  return (/* render produk */);
}

Menggunakan Axios (lebih ringkas):

import axios from 'axios';

useEffect(() => {
  axios.get('https://api.example.com/products')
    .then(response => setProducts(response.data))
    .catch(error => console.error(error));
}, []);

Handling Data

Setelah response diterima, data JSON perlu di-parsing (Fetch manual dengan .json(), Axios otomatis) dan disimpan ke dalam state komponen. State yang berubah akan memicu re-render sehingga UI otomatis memperbarui tampilan dengan data terbaru.

Dalam analogi restoran: pelayan menerima nampan makanan (response), memastikan isinya sesuai pesanan (parsing), lalu meletakkannya di meja pelanggan (state → UI).

Handling Error

Tidak semua permintaan berjalan mulus. Kemungkinan error meliputi:

• Jaringan bermasalah (tidak ada koneksi)
• URL salah (404)
• Server error (500)
• Format response tidak sesuai

Penanganan error bisa dilakukan dengan try-catch (async/await) atau .catch() pada promise. Pada React, kita bisa menyimpan state error dan menampilkan pesan ramah pengguna.

// async/await dengan try-catch
const [error, setError] = useState(null);

useEffect(() => {
  const fetchData = async () => {
    try {
      const res = await fetch(url);
      if (!res.ok) throw new Error(`Error ${res.status}`);
      const data = await res.json();
      setProducts(data);
    } catch (err) {
      setError(err.message);
    }
  };
  fetchData();
}, []);

Analogi lanjutan: Ketika pelayan ke dapur tetapi pesanan belum siap (loading), atau ternyata bahan habis (error 500), pelayan kembali dan memberi tahu pelanggan dengan sopan, bukan membiarkan meja kosong tanpa kabar.

Menampilkan ke UI

Data yang sudah masuk ke state biasanya berbentuk array. Untuk menampilkannya, kita gunakan looping (.map()) di JSX (React) atau v-for (Vue). Jangan lupa tangani kondisi loading (tampilkan spinner/skeleton) dan empty state (tampilkan pesan “Data kosong”).

Contoh di React:

if (loading) return <p>Memuat...</p>;
if (error) return <p>Terjadi kesalahan: {error}</p>;
if (products.length === 0) return <p>Tidak ada produk.</p>;

return (
  <ul>
    {products.map(product => (
      <li key={product.id}>{product.name}</li>
    ))}
  </ul>
);
Hasil Pembelajaran
Melalui pembelajaran ini, saya memahami bahwa proses fetch data dilakukan dengan mengirimkan request dari frontend ke endpoint API yang telah disediakan oleh backend. Request ini biasanya menggunakan HTTP method seperti GET untuk mengambil data, kemudian backend akan mengembalikan response dalam format JSON sesuai dengan schema yang telah dirancang.
Saya juga mempelajari bahwa proses fetch bersifat asynchronous, sehingga frontend tidak perlu menunggu proses selesai untuk tetap menjalankan bagian lain dari aplikasi. Oleh karena itu, diperlukan penanganan seperti loading state untuk memberikan informasi kepada pengguna bahwa data sedang diambil, serta error handling jika terjadi kegagalan dalam pengambilan data.
Selain itu, saya memahami pentingnya mengelola data yang diterima, seperti menyimpan ke dalam state dan menampilkannya ke dalam komponen UI. Dengan pengelolaan yang baik, data dapat ditampilkan secara dinamis dan responsif sesuai dengan interaksi pengguna.
Kesimpulan
Implementasi fetch data merupakan bagian penting dalam integrasi antara backend dan frontend. Proses ini memungkinkan aplikasi untuk mengambil dan menampilkan data secara dinamis dari server.
Dengan memahami konsep fetch data, saya dapat membangun aplikasi yang lebih interaktif dan terhubung dengan backend secara efektif, sehingga pengalaman pengguna menjadi lebih baik dan sistem dapat berjalan secara optimal.