Fetch API di React: Panduan Lengkap Mengambil Data

Sebagai pengembang React, kemampuan untuk mengambil data dari backend dan menampilkannya di antarmuka pengguna (UI) adalah keterampilan fundamental. Salah satu cara paling modern dan efisien untuk melakukan ini adalah menggunakan Fetch API. Artikel ini akan membimbing Anda melalui konsep-konsep inti, memberikan contoh implementasi praktis, dan berbagi tips yang akan meningkatkan pemahaman Anda tentang Fetch API di React.

Apa Itu Fetch API?

Fetch API adalah antarmuka JavaScript modern yang menyediakan cara yang lebih kuat dan fleksibel untuk melakukan permintaan jaringan (seperti mengambil data dari server). Ini menggantikan XMLHttpRequest yang lebih lama dan lebih canggung. Fetch API bekerja berdasarkan Promises, yang membuat penanganan respons asinkron menjadi jauh lebih bersih dan lebih mudah dibaca.

Keunggulan Fetch API:

• Berbasis Promise: Membuat penanganan operasi asinkron lebih terstruktur.
• Sintaks yang Bersih: Lebih mudah dibaca dan ditulis dibandingkan XMLHttpRequest.
• Fleksibel: Mendukung berbagai jenis permintaan HTTP (GET, POST, PUT, DELETE, dll.) dan format data.
• Standard Web: Tersedia di browser modern tanpa perlu pustaka eksternal.

Mengambil Data dengan Fetch API di Komponen React

Dalam React, kita biasanya melakukan operasi pengambilan data ketika komponen di-mount (telah ditambahkan ke DOM) atau berdasarkan interaksi pengguna. Hook useEffect adalah tempat yang ideal untuk melakukan panggilan API yang terikat dengan siklus hidup komponen.

Langkah-langkah Dasar:

1. Membuat Permintaan GET: Gunakan fetch() dengan URL endpoint API Anda.
2. Menangani Respons: Respons dari fetch() adalah objek Response. Anda perlu memanggil metode seperti .json() untuk mengurai body respons sebagai JSON. Metode ini juga mengembalikan Promise.
3. Menyimpan Data: Gunakan useState hook untuk menyimpan data yang diambil dan mengontrol state komponen Anda.
4. Menangani Loading dan Error: Penting untuk memberikan umpan balik kepada pengguna saat data sedang diambil (loading) atau jika terjadi kesalahan.

Contoh Implementasi Sederhana: Mengambil Daftar Pengguna

Mari kita asumsikan kita memiliki endpoint API di https://api.example.com/users yang mengembalikan array objek pengguna.

import React, { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const response = await fetch('https://api.example.com/users'); // 1. Buat Permintaan GET

        if (!response.ok) { // Periksa apakah respons sukses (status code 2xx)
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json(); // 2. Urai JSON
        setUsers(data); // 3. Simpan Data
      } catch (e) {
        setError(e); // Tangani Error
        console.error("Gagal mengambil data:", e);
      } finally {
        setIsLoading(false); // Set loading selesai, baik sukses maupun gagal
      }
    };

    fetchUsers();
  }, []); // Array dependensi kosong berarti efek ini hanya berjalan sekali setelah mount

  if (isLoading) {
    return <div>Memuat data pengguna...</div>; // Tampilkan saat loading
  }

  if (error) {
    return <div>Terjadi kesalahan: {error.message}</div>; // Tampilkan jika ada error
  }

  return (
    <div>
      <h1>Daftar Pengguna</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

Penjelasan Kode:

• useState: Kita menggunakan tiga state: users untuk menyimpan data, isLoading untuk indikator loading, dan error untuk menyimpan objek kesalahan jika terjadi.
• useEffect: Hook ini digunakan untuk menjalankan efek samping, dalam hal ini, pengambilan data.
  • Fungsi async di dalam useEffect: Karena fetch dan response.json() mengembalikan Promise, kita menggunakan fungsi async/await untuk membuatnya lebih mudah dibaca. Penting untuk dicatat bahwa fungsi useEffect itu sendiri tidak dapat langsung menjadi async.
  • await fetch(...): Menunggu respons dari permintaan HTTP.
  • !response.ok: Pemeriksaan penting! fetch hanya melempar error untuk masalah jaringan (misalnya, tidak ada koneksi). Untuk status HTTP seperti 404 atau 500, fetch tidak melempar error, tetapi response.ok akan bernilai false. Kita perlu melempar error secara manual dalam kasus ini.
  • await response.json(): Mengurai body respons menjadi objek JavaScript.
  • setUsers(data): Memperbarui state users dengan data yang diambil.
  • catch(e): Menangkap dan menyimpan kesalahan apa pun yang terjadi selama proses pengambilan data.
  • finally: Blok finally akan selalu dieksekusi, terlepas dari apakah proses try berhasil atau gagal. Ini adalah tempat yang sempurna untuk mengatur isLoading menjadi false.
  • Array Dependensi Kosong []: Memastikan useEffect hanya berjalan satu kali setelah komponen pertama kali di-mount.

Menangani Permintaan POST (atau Metode Lainnya)

Fetch API juga sangat fleksibel untuk metode HTTP lainnya seperti POST. Untuk melakukan permintaan POST, Anda perlu menyediakan opsi kedua ke fetch():

fetch('https://api.example.com/users', {
  method: 'POST', // Tentukan metode HTTP
  headers: {
    'Content-Type': 'application/json', // Beri tahu server kita mengirim JSON
    // Tambahkan header otentikasi jika diperlukan
    // 'Authorization': 'Bearer your_token'
  },
  body: JSON.stringify({ // Ubah objek JavaScript menjadi string JSON
    name: 'Pengguna Baru',
    email: 'baru@example.com'
  }),
})
.then(response => {
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  return response.json(); // Atau response.text() tergantung respons server
})
.then(data => {
  console.log('Pengguna berhasil ditambahkan:', data);
})
.catch(error => {
  console.error('Gagal menambahkan pengguna:', error);
});

• method: 'POST': Mengubah permintaan menjadi POST.
• headers: {'Content-Type': 'application/json'}: Memberi tahu server bahwa body permintaan berisi data dalam format JSON. Ini krusial agar server tahu cara menginterpretasikan data yang Anda kirim.
• body: JSON.stringify({...}): Data yang dikirim dalam body harus berupa string. JSON.stringify() mengubah objek JavaScript menjadi string JSON.

Tips Praktis yang Jarang Diketahui Pemula

1. Penanganan Kesalahan yang Lebih Baik: Selain memeriksa response.ok, perhatikan juga header respons atau body untuk pesan kesalahan spesifik dari API. Beberapa API mengembalikan detail kesalahan dalam format JSON.

   if (!response.ok) {
     const errorData = await response.json(); // Coba baca body sebagai JSON untuk detail error
     throw new Error(`HTTP error! status: ${response.status}, Message: ${errorData.message || 'Unknown error'}`);
   }
   

2. AbortController untuk Membatalkan Permintaan: Jika pengguna bernavigasi pergi dari komponen atau menutup modal saat permintaan sedang berjalan, Anda mungkin ingin membatalkannya untuk menghemat sumber daya dan menghindari pembaruan state pada komponen yang sudah tidak terpasang.

   import React, { useState, useEffect } from 'react';
   
   function UserDetails({ userId }) {
     const [user, setUser] = useState(null);
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState(null);
   
     useEffect(() => {
       const abortController = new AbortController(); // Buat AbortController
       const signal = abortController.signal; // Dapatkan signal
   
       const fetchUser = async () => {
         try {
           setIsLoading(true); // Reset loading
           const response = await fetch(`https://api.example.com/users/${userId}`, { signal }); // Teruskan signal ke fetch
   
           if (!response.ok) {
             throw new Error(`HTTP error! status: ${response.status}`);
           }
   
           const data = await response.json();
           setUser(data);
         } catch (e) {
           if (e.name === 'AbortError') {
             console.log('Permintaan dibatalkan');
           } else {
             setError(e);
             console.error("Gagal mengambil data pengguna:", e);
           }
         } finally {
           setIsLoading(false);
         }
       };
   
       fetchUser();
   
       // Cleanup function: dikembalikan oleh useEffect
       return () => {
         abortController.abort(); // Batalkan permintaan saat komponen unmount
         console.log('Membersihkan efek...');
       };
     }, [userId]); // Panggil ulang jika userId berubah
   
     if (isLoading) return <div>Memuat detail pengguna...</div>;
     if (error) return <div>Error: {error.message}</div>;
   
     return (
       <div>
         <h2>{user.name}</h2>
         <p>Email: {user.email}</p>
       </div>
     );
   }
   
   export default UserDetails;
   

   • new AbortController(): Membuat instance controller.
   • abortController.signal: Objek signal ini yang diteruskan ke opsi fetch.
   • abortController.abort(): Dipanggil di fungsi cleanup useEffect. Ini akan memberi tahu fetch untuk membatalkan permintaan. fetch akan melempar AbortError yang bisa Anda tangani.

3. Cache Data dengan navigator.cache (Advanced): Untuk aplikasi yang lebih kompleks, Anda bisa memanfaatkan Cache API di browser untuk menyimpan respons API secara lokal. Ini dapat meningkatkan kinerja secara signifikan dengan mengurangi permintaan jaringan yang berulang. Namun, ini adalah topik yang lebih lanjut dan mungkin memerlukan pustaka bantu.

4. Menggunakan fetch dengan axios atau Pustaka Lain: Meskipun fetch adalah API bawaan, banyak pengembang memilih pustaka seperti axios karena fitur tambahan seperti interceptor, penanganan kesalahan yang lebih baik secara default, dan dukungan yang lebih luas untuk versi browser lama (meskipun dengan polyfill). Jika Anda menggunakannya, prinsip dasar pengambilan data tetap sama.

Kapan Menggunakan Fetch API vs. Pustaka Lain?

• Gunakan fetch bawaan:
  • Untuk proyek yang ringan atau ketika Anda ingin meminimalkan dependensi.
  • Ketika Anda sudah terbiasa dengan penanganan Promise dan async/await.
  • Untuk fitur-fitur standar pengambilan data.
• Gunakan Pustaka seperti axios:
  • Saat Anda membutuhkan fitur seperti interceptor untuk menambahkan header otentikasi secara global atau logging.
  • Untuk kemudahan penanganan pembatalan permintaan dan pelacakan progres unggahan/unduhan.
  • Ketika Anda membutuhkan dukungan browser yang lebih luas tanpa polyfill.
  • Untuk manajemen kesalahan yang lebih terstruktur.

Namun, memahami fetch sangat penting karena merupakan fondasi dari pengambilan data di web modern, dan banyak pustaka di atasnya dibangun dengan prinsip yang sama.

Kesimpulan

Fetch API adalah alat yang ampuh dan modern di React untuk berinteraksi dengan backend Anda. Dengan memahami cara membuat permintaan, menangani respons, mengelola state loading dan error, serta menggunakan teknik seperti AbortController, Anda dapat membangun aplikasi React yang dinamis dan responsif. Teruslah berlatih, bereksperimen, dan Anda akan segera menguasai pengambilan data di React!