Proyek Mini: API Client Lengkap

Saatnya merakit semuanya

Kamu sudah belajar request, method, status code, header, JSON, fetch, timeout, error handling, dan auth. Modul ini adalah ujian praktiknya: bangun API client mini, satu modul JavaScript yang membungkus semua pengetahuan itu menjadi fungsi yang siap dipakai project sungguhan.

Kenapa API client terpusat itu penting

Project tanpa API client terpusat biasanya berakhir dengan fetch berserakan di 30 file, masing-masing dengan cara handle error berbeda. Saat token berubah format atau base URL pindah, kamu harus mengedit 30 tempat. API client terpusat memindahkan semua logika HTTP ke satu file: base URL, header auth, timeout, retry, dan error mapping. Perubahan cukup di satu tempat.

Contoh 1: kerangka API client

const API_URL = "https://jsonplaceholder.typicode.com";

async function api(path, options) {
  const controller = new AbortController();
  const timer = setTimeout(function() { controller.abort(); }, 10000);

  try {
    const response = await fetch(API_URL + path, {
      headers: { "Content-Type": "application/json" },
      ...options,
      signal: controller.signal
    });
    if (response.status === 401) throw new Error("Sesi berakhir, login ulang");
    if (!response.ok) throw new Error("HTTP " + response.status);
    if (response.status === 204) return null;
    return await response.json();
  } finally {
    clearTimeout(timer);
  }
}

Satu fungsi menangani base URL, timeout 10 detik, auth error, dan response kosong 204. Semua request di aplikasimu kini cukup memanggil api("/users/1").

Contoh 2: memakai client untuk CRUD lengkap

const daftar = await api("/posts?_limit=5");
console.log("Dapat", daftar.length, "post");

const baru = await api("/posts", {
  method: "POST",
  body: JSON.stringify({ title: "Halo", userId: 1 })
});
console.log("Dibuat dengan id", baru.id);

await api("/posts/1", { method: "DELETE" });
console.log("Dihapus");

Tiga operasi (baca, buat, hapus) dengan pola yang sama persis. Perhatikan betapa bersihnya kode pemanggil: tidak ada header berulang, tidak ada try/catch timeout di setiap tempat, karena semuanya sudah ditangani di dalam api().

Kesalahan umum

Salah: mencampur logika HTTP dengan logika tampilan. Fungsi fetch yang sekaligus mengupdate DOM sulit di-test dan dipakai ulang. Yang benar: API client hanya mengurus HTTP dan mengembalikan data; rendering urusan komponen lain.

Salah: tidak memisahkan konfigurasi. Base URL tertulis langsung di setiap fetch. Yang benar: satu konstanta API_URL yang mudah diganti antar environment (dev, staging, production).

Salah: menelan error diam-diam. catch kosong agar "tidak error" justru menyembunyikan bug. Yang benar: selalu teruskan error yang bermakna ke pemanggil, atau tampilkan ke user.

Tugas akhirmu

Modul ini punya assignment: bangun API client versimu sendiri untuk JSONPlaceholder, lengkap dengan GET ber-pagination, POST, dan penanganan 404/500 yang ramah. Kirim kodemu dan biarkan AI tutor menilai: ia akan memeriksa bug, menyarankan perbaikan, dan menunjukkan kesalahan syntax. Anggap ini simulasi code review di dunia kerja.

Catatan teknis: Di project profesional, pola ini sering dibungkus library seperti axios instance atau TanStack Query. Tapi memahami cara membuatnya dari nol dengan fetch membuatmu paham apa yang sebenarnya dilakukan library-library itu.