by 
Mengambil data dari server tanpa memuat ulang halaman adalah inti aplikasi web modern, misalnya menampilkan daftar produk atau memuat komentar. Artikel ini membahas cara mengambil data dari API dengan Fetch di JavaScript.
Request GET dengan fetch()
<script>
fetch("https://api.contoh.com/produk")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log("Kesalahan:", error));
</script>
Versi async/await (Lebih Rapi)
<script>
async function ambilData() {
try {
const res = await fetch("https://api.contoh.com/produk");
if (!res.ok) throw new Error("Gagal: " + res.status);
const data = await res.json();
console.log(data);
} catch (e) {
console.log(e.message);
}
}
</script>
Contoh Kasus: Menampilkan Data ke Halaman
<script>
async function tampilProduk() {
const res = await fetch("/api/produk");
const produk = await res.json();
const html = produk.map(p => `<li>${p.nama}</li>`).join("");
document.getElementById("daftar").innerHTML = html;
}
</script>
Kesalahan Umum
- Lupa memeriksa
res.ok— fetch tidak menganggap status 404/500 sebagai error otomatis. - Lupa
awaitsehingga mendapat Promise, bukan data.
Kesimpulan
Gunakan fetch() untuk mengambil data dari API. Gaya async/await lebih mudah dibaca; jangan lupa memeriksa res.ok dan membungkusnya dengan try...catch untuk menangani error.
Referensi: untuk penjelasan lebih mendalam, kunjungi dokumentasi resmi JavaScript (MDN).
