Fetch GET: Mengambil Data dari API

fetch() dalam 30 detik

fetch() adalah fungsi bawaan browser untuk mengirim request HTTP. Bentuk paling sederhananya cuma butuh URL, dan method default-nya GET:

const res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
const data = await res.json();
console.log(data.title);

Dua baris penting di sini: fetch mengembalikan Response, lalu res.json() mengubah body-nya menjadi objek JavaScript. Keduanya asynchronous, jadi pakai await (di dalam fungsi async) atau rantai .then().

Contoh lengkap: daftar artikel

Di aplikasi nyata, pengambilan data dibungkus fungsi yang rapi:

async function ambilArtikel(halaman = 1) {
  const params = new URLSearchParams({ _page: halaman, _limit: "10" });
  const url = "https://jsonplaceholder.typicode.com/posts?" + params;

  const res = await fetch(url);
  if (!res.ok) {
    throw new Error("Gagal mengambil artikel: " + res.status);
  }
  return res.json(); // array berisi 10 artikel
}

const artikel = await ambilArtikel(2);
console.log("Jumlah:", artikel.length);

Perhatikan pola URLSearchParams dari modul URL dipakai lagi di sini. Query seperti _page dan _limit adalah cara umum meminta halaman tertentu (pagination).

Pola loading di UI

Request butuh waktu, dan user tidak boleh menatap layar kosong. Pola standarnya tiga state: loading, sukses, error.

async function tampilkanArtikel() {
  const el = document.getElementById("daftar");
  el.textContent = "Memuat..."; // state loading

  try {
    const artikel = await ambilArtikel(1);
    el.innerHTML = artikel
      .map((a) => "<li>" + a.title + "</li>")
      .join("");
  } catch (err) {
    el.textContent = "Gagal memuat. Coba refresh halaman.";
    console.error(err); // detailnya cukup di console
  }
}

Framework seperti React atau Next.js punya cara sendiri (useEffect, SWR, React Query), tapi logikanya sama: tampilkan sesuatu selama menunggu, tampilkan data saat tiba, tampilkan pesan ramah saat gagal.

json() bukan satu-satunya cara baca body

res.json() memang paling sering dipakai, tapi Response punya beberapa pembaca body lain untuk kebutuhan berbeda:

• res.text() : baca sebagai string mentah. Berguna saat server mengembalikan HTML atau CSV.
• res.blob() : baca sebagai data biner, misalnya untuk mengunduh gambar atau PDF lalu menampilkannya.
• res.arrayBuffer() : untuk pemrosesan biner tingkat lanjut.

Satu aturan keras: body hanya bisa dibaca sekali. Memanggil res.json() lalu res.text() akan error karena stream-nya sudah habis. Kalau butuh dipakai dua kali (misalnya untuk logging sekaligus parsing), clone dulu dengan res.clone().

Catatan teknis: Ini perangkap paling umum: fetch tidak melempar error untuk status 404 atau 500. Selama server merespons (walau dengan error), promise-nya resolve normal. Error hanya dilempar saat jaringan gagal total, misalnya offline atau domain tidak ada. Makanya selalu cek res.ok atau res.status sendiri sebelum memanggil res.json().