Mengambil Data dengan Fetch API
Membangun daftar pengguna dari API publik dengan state loading dan error.
Kenapa Fetch API?
Aplikasi nyata jarang punya data sendiri; datanya diambil dari server lewat API. fetch() adalah cara modern JavaScript meminta data lewat HTTP, dan memahaminya membuka pintu ke seluruh dunia backend.
Langkah Membangun
HTML: Tombol "Muat Pengguna", area daftar kartu pengguna, dan area pesan untuk loading/error.
CSS: Kartu pengguna dengan avatar, nama, dan email. Skeleton atau spinner saat loading. Pesan error merah dengan tombol "Coba Lagi".
JS: Tiga state yang wajib ditangani:
- Loading: Tampilkan spinner, nonaktifkan tombol.
- Sukses:
const res = await fetch(url); const data = await res.json();lalu render kartu. - Error: Bungkus dengan try/catch. Jika gagal, tampilkan pesan ramah + tombol coba lagi.
Pakai API publik gratis JSONPlaceholder (https://jsonplaceholder.typicode.com/users) yang tidak butuh API key.
async/await membuat kode asinkron terbaca seperti kode biasa. await fetch() berarti "tunggu sampai respons datang, lalu lanjutkan".
Kesalahan Umum
- Lupa
await res.json()sehingga yang di-render adalah Promise, bukan data. - Tidak menangani error sehingga halaman blank saat API down.
- Tidak mengecek
res.ok(fetch tidak error untuk status 404/500, harus dicek manual).
export default function App(): JSX.Element { return <h1>Hello world</h1> }
Tantangan
Tantangan: Detail Pengguna
Saat kartu pengguna diklik, fetch data detail dari /users/{id} dan tampilkan di modal: telepon, website, alamat lengkap, dan perusahaan.