Coba bayangin order GoFood. Kamu tap "pesan", aplikasi langsung nampilin "lagi cari driver..." — kamu BELUM tau kapan makanan dateng, tapi sistem janji bakal kasih tau pas udah update. Itu Promise dalam dunia nyata: janji buat ngabarin hasil di masa depan. JavaScript pake konsep sama buat operasi yang butuh waktu (ambil data dari server, baca file, dll). fetch() adalah cara modern minta data dari API — return Promise yang bakal resolve pas data dateng, atau reject pas gagal.

🤔 Plot twist fetch. Beda dari banyak HTTP library lain, fetch GAK akan reject pas server balikin status 404 atau 500 — dia anggep "respons sukses received, walau isinya error". Kamu harus cek sendiri response.ok atau response.status. Bug klasik yang sering bikin frustasi pemula.

// Membuat Promise
function buatJanji(berhasil) {
  return new Promise((resolve, reject) => {
    if (berhasil) {
      resolve("Berhasil!");
    } else {
      reject("Gagal!");
    }
  });
}

// Menggunakan Promise
buatJanji(true)
  .then(hasil => console.log(hasil))   // "Berhasil!"
  .catch(error => console.log(error));

Fetch API — mengambil data dari server:

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log("Error:", error));

Promise memiliki 3 status:

• Pending — sedang berjalan
• Fulfilled — berhasil (masuk ke .then())
• Rejected — gagal (masuk ke .catch())

🎭 Analogi sehari-hari

fetch = pesan ojol GoFood.

• Pending — driver lagi jalan ke warung.
• Fulfilled — makanan sampai (.then).
• Rejected — driver cancel / warung tutup (.catch).

Kamu tidak nunggu di pintu — kamu lanjut nonton TV (kode lain tetap jalan). Pas ojol datang, baru kamu reaksi.

⚠️ Jebakan yang sering ditemui

1. fetch TIDAK reject di status 404/500 — hanya kalau network gagal.

fetch("/api/notfound")
  .then(r => r.json())   // ❌ tetap masuk sini meskipun 404
  .catch(e => ...);

// Cara benar:
fetch("/api/notfound")
  .then(r => {
    if (!r.ok) throw new Error(`HTTP ${r.status}`);
    return r.json();
  });

2. response.json() adalah Promise lain — butuh await/.then lagi.

const r = await fetch("/api");
const data = r.json();              // ❌ data masih Promise!
const data = await r.json();        // ✅

3. Lupa .catch = unhandled rejection di console.

fetch("/api").then(r => r.json())   // ❌ kalau gagal, error nyangkut
fetch("/api").then(r => r.json()).catch(e => ...);  // ✅

🧪 Tebakan cepat — fetch chain. Tanpa run, tebak nilai data:

const res = await fetch("/api/user");
const data = res.json();
console.log(data);

Jawaban: Promise { <pending> }, BUKAN object data. res.json() return Promise lain — perlu await lagi. Fix: const data = await res.json(). Bug klasik karena fetch flow itu dua tahap async: pertama tunggu response headers (fetch), terus tunggu body parse (.json()). Lupa await yang kedua = bug subtle.

TL;DR: Promise = janji nilai masa depan (pending → fulfilled atau rejected). fetch() minta data dari API, return Promise. Pattern: fetch().then(r => r.json()).then(data => ...).catch(err => ...). Awas: fetch GAK reject di status 4xx/5xx — cek response.ok manual. Modern: pakai async/await (lesson berikutnya) buat sintaks lebih readable.