Fetch API

fetch, Response, JSON, POST dengan body.

Pahami konsepnya

fetch(url) mengembalikan Promise yang resolve ke Response object. Response punya .ok (boolean), .status (kode HTTP), .json() (Promise hasil parse), .text() (Promise string). fetch TIDAK melempar error pada 404/500 — ia resolve dengan response.ok false; kamu harus memeriksa manual.

POST dengan body: fetch(url, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }). Response juga bisa dibaca lewat .text() atau .blob() untuk file.

Fetch adalah pengganti XMLHttpRequest — API yang lebih bersih berbasis Promise. Digunakan untuk mengambil data dari API, mengirim form, dan berkomunikasi dengan server.

Coba contoh kode

// GET
async function ambilUser() {
  const resp = await fetch("https://httpbin.org/get");
  if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
  const data = await resp.json();
  return data;
}

// POST
async function kirimUser(user) {
  const resp = await fetch("https://httpbin.org/post", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(user),
  });
  return resp.json();
}

console.log("Pola fetch siap — jalankan di browser atau Node 18+.");

resp.ok memeriksa sukses HTTP (200-299). resp.json() juga Promise — perlu await kedua. POST mengirim body sebagai string JSON dengan header Content-Type.

Latihan singkat

Uji: tulis pola fetch GET dengan response.ok check.