ReactJS #11: Fetch API Part 1 – Memanggil Data dari Web Service

ReactJS #11: Fetch API Part 1

Memanggil Data dari Web Service
(Mengambil Data dari Dunia Luar)

Halo, penjelajah data! 🗺️

Selama ini kita membuat tampilan dengan data buatan sendiri (state dan props). Tapi aplikasi sungguhan butuh data dari luar, misalnya daftar berita, cuaca terkini, atau profil pengguna. Data itu biasanya disediakan oleh Web Service atau API. Di artikel ini, kita akan belajar cara mengambil data dari API menggunakan fetch.

📚 ➡️ 🏛️ ➡️ 📖
API itu seperti perpustakaan raksasa, kita bisa meminjam data yang kita butuhkan!

🔎 Apa Itu API?

API (Application Programming Interface) adalah 'jembatan' yang memungkinkan aplikasi kita berbicara dengan aplikasi lain di internet. Bayangkan API seperti petugas perpustakaan. Kita minta buku tertentu, petugas mencarikannya, lalu memberikan buku itu kepada kita. Di sini, 'buku' adalah data.

Contoh API terkenal:

• JSONPlaceholder – API palsu untuk latihan.
• OpenWeatherMap – data cuaca.
• The Movie Database – data film.

Kita akan menggunakan JSONPlaceholder karena gratis dan mudah. Alamatnya: https://jsonplaceholder.typicode.com/posts

📡 Apa Itu Fetch?

Fetch adalah fungsi bawaan JavaScript untuk mengambil data dari internet. Ia seperti 'surat izin meminjam buku' yang kita kirim ke petugas perpustakaan. Fetch mengembalikan Promise (janji) bahwa data akan datang, entah berhasil atau gagal.

Di React, kita biasanya memanggil fetch di dalam useEffect agar dijalankan saat komponen dimuat.

📦 Mengambil Data Sederhana dengan Fetch

Mari buat komponen yang mengambil daftar postingan dari JSONPlaceholder dan menampilkannya.

import { useState, useEffect } from 'react'; function DaftarPostingan() { const [posts, setPosts] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { // Kirim permintaan ke API fetch('https://jsonplaceholder.typicode.com/posts') .then(response => { if (!response.ok) { throw new Error('Gagal mengambil data'); } return response.json(); // ubah response ke format JSON }) .then(data => { setPosts(data); // simpan data ke state setLoading(false); }) .catch(err => { setError(err.message); setLoading(false); }); }, []); // kosong, jalankan sekali saat komponen dimuat // Tampilkan loading jika sedang mengambil data if (loading) { return <p>⏳ Memuat data...</p> } // Tampilkan error jika gagal if (error) { return <p>❌ Error: {error}</p> } // Tampilkan daftar postingan return ( <div> <h3>📰 Daftar Postingan (dari API)</h3> {posts.map(post => ( <div key={post.id} className="post-item"> <strong>{post.title}</strong> <p>{post.body.substring(0, 100)}...</p> </div> ))} </div> ); }

Penjelasan setiap bagian:

• fetch(url) – meminta data ke URL.
• .then(response => response.json()) – mengubah response (yang masih mentah) menjadi objek JavaScript.
• .then(data => setPosts(data)) – menyimpan data ke state.
• .catch() – menangkap error jika jaringan bermasalah.
• State loading dan error untuk memberi umpan balik ke pengguna.

Coba masukkan komponen ini ke App.js dan jalankan. Kamu akan melihat daftar judul postingan dari internet!

💡 Coba sendiri: Ganti URL dengan https://jsonplaceholder.typicode.com/users untuk mengambil data pengguna. Atau /todos untuk daftar tugas.

⏳ Menangani Loading dengan Lebih Baik

Kita sudah menampilkan teks "Memuat data...". Tapi kadang loading butuh waktu. Kita bisa menambahkan spinner atau animasi sederhana. Berikut contoh dengan emoji:

if (loading) { return ( <div style={{ textAlign: 'center' }}> <div style={{ fontSize: '3em' }}>⏳</div> <p>Sedang mengambil data dari dunia luar...</p> </div> ); }

❌ Menangani Error dengan Ramah

Kadang internet putus atau server sedang down. Kita bisa memberi pesan yang lebih ramah dan tombol untuk mencoba lagi.

function DaftarPostingan() { const [posts, setPosts] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); function ambilData() { setLoading(true); setError(null); fetch('https://jsonplaceholder.typicode.com/posts') .then(response => { if (!response.ok) throw new Error('Gagal mengambil data'); return response.json(); }) .then(data => { setPosts(data); setLoading(false); }) .catch(err => { setError(err.message); setLoading(false); }); } useEffect(() => { ambilData(); }, []); if (loading) return <p>⏳ Memuat...</p>; if (error) { return ( <div> <p>❌ Terjadi kesalahan: {error}</p> <button onClick={ambilData}>🔄 Coba Lagi</button> </div> ); } return ( ... ); }

Dengan tombol "Coba Lagi", pengguna bisa mengulang permintaan tanpa reload halaman.

🧪 Latihan: Ambil Data Pengguna

Buat komponen DaftarPengguna yang mengambil data dari https://jsonplaceholder.typicode.com/users. Tampilkan nama, email, dan kota mereka dalam bentuk kartu. Jangan lupa loading dan error.

Kerangka (coba selesaikan sendiri):

import { useState, useEffect } from 'react'; function DaftarPengguna() { const [users, setUsers] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { fetch('https://jsonplaceholder.typicode.com/users') .then(res => { if (!res.ok) throw new Error('Gagal ambil data'); return res.json(); }) .then(data => { setUsers(data); setLoading(false); }) .catch(err => { setError(err.message); setLoading(false); }); }, []); if (loading) return <p>⏳ Memuat pengguna...</p>; if (error) return <p>❌ {error}</p>; return ( <div> <h3>👥 Daftar Pengguna</h3> {users.map(user => ( <div key={user.id} className="card"> <h4>{user.name}</h4> <p>📧 {user.email}</p> <p>🏙️ {user.address.city}</p> </div> ))} </div> ); }

Coba jalankan dan lihat hasilnya. Jika berhasil, kamu sudah bisa mengambil data dari dunia luar!

📌 Tips Penting

• Selalu handle loading dan error agar pengguna tidak bingung.
• Gunakan response.ok untuk mengecek apakah respons sukses (status 200-299).
• Fetch bisa gagal karena jaringan, jadi .catch wajib ada.
• Jangan lupa array dependencies di useEffect, biasanya kosong [] untuk ambil data sekali.
• Jika ingin mengambil ulang berdasarkan aksi (misal klik tombol), buat fungsi terpisah seperti contoh di atas.

🚀 Kesimpulan

• API adalah sumber data dari internet.
• Fetch adalah alat untuk mengambil data dari API.
• Kita menggunakan useEffect untuk memanggil fetch saat komponen dimuat.
• Data yang diterima disimpan ke state agar bisa ditampilkan.
• Selalu tampilkan status loading dan tangani error dengan baik.

Di artikel selanjutnya kita akan belajar menampilkan data dari API dengan lebih rapi, misalnya dalam bentuk grid atau tabel, serta belajar mengambil data berdasarkan parameter (misal detail postingan). Sampai jumpa!

Lanjut ke ReactJS #12: Fetch API Part 2 ▶

✨ Sekarang aplikasi React-mu bisa berbicara dengan dunia luar! ✨