Daftar Isi Utama

• Lihat indeks lengkap di [01. Pengenalan]

Panduan ini untuk siapa

• Pembelajar yang sedang membangun aplikasi dengan ketergantungan tinggi ke API
• Pemula yang ingin flow request lebih stabil dan gampang di-debug
• Siapa pun yang capek dengan loading/error state yang tidak jelas

Apa yang akan Anda pelajari

• Cara menyusun service layer API yang bersih
• Cara memodelkan state loading/empty/error/success secara jelas
• Cara menambah ketahanan dasar: timeout, retry, dan ide caching ringan

Mengapa topik ini penting

Banyak masalah frontend muncul di batas API: respons tidak konsisten, jaringan lambat, atau bentuk data berubah.

Pola integrasi yang konsisten bikin aplikasi terasa lebih stabil dan proses debugging jauh lebih cepat. Ini termasuk skill paling penting buat React app yang siap dipakai nyata.

Konsep inti

State UI

• Loading saat menunggu data
• Empty saat data kosong
• Error saat request gagal
• Success saat data siap ditampilkan

Anggap state ini sebagai perilaku UI utama, bukan fitur tambahan belakangan.

Service layer

• Pisahkan logika fetch dari komponen UI
• Standarkan mapping respons dan error

Service layer bikin komponen fokus ke tampilan, bukan detail HTTP.

Panduan langkah demi langkah

Langkah 1 — Buat API client function

Kelompokkan endpoint call di folder services dengan nama fungsi yang jelas.

Langkah 2 — Bentuk model state request

Kelola lifecycle request dengan eksplisit: isLoading, error, dan data.

Opsional: tambahkan status: "idle" | "loading" | "success" | "error" biar branching UI lebih clean.

Langkah 3 — Tambahkan ketahanan

Tambahkan timeout dan retry terbatas untuk error sementara (bukan semua error).

Mapping error teknis jadi pesan yang bisa dipahami user.

Contoh praktis

Contoh 1 — Bentuk fungsi service

export async function fetchMovies(query: string) {
	const response = await fetch(`/api/movies?q=${encodeURIComponent(query)}`);
	if (!response.ok) throw new Error("Failed to fetch movies");
	return response.json();
}

Tip:

• Logic khusus endpoint simpan di service, jangan dicampur di komponen UI.

Contoh 2 — Pola state di komponen

• Set loading sebelum request
• Set data saat sukses
• Set error saat gagal

Aturan real case:

• Selalu bersihkan error/data lama sebelum memulai request baru.

Kesalahan umum dan cara menghindarinya

• fetch dipanggil langsung di banyak komponen -> pusatkan di service layer
• Status non-200 diabaikan -> selalu cek response.ok
• Error teknis ditampilkan mentah ke user -> mapping ke pesan yang ramah pengguna
• Logic request tercampur dengan rendering berat -> pisahkan concern dengan tegas

Mini Project

• Buat movie explorer dengan:
• halaman search,
• halaman detail,
• state loading/empty/error/success,
• timeout untuk request lambat,
• tombol retry sederhana saat request gagal.

Bonus:

• Tambahkan cache in-memory kecil agar query yang sama tidak request ulang.

Latihan cepat

• Definisikan model response API bertipe
• Tambahkan timeout untuk satu endpoint
• Tambahkan retry untuk satu kasus kegagalan sementara
• Buat helper untuk mapping error teknis ke teks UI yang lebih manusiawi

Ringkasan utama

• Integrasi API butuh arsitektur, bukan sekadar “langsung fetch”
• Pemisahan service layer menjaga komponen tetap bersih dan maintainable
• State yang jelas + error message yang ramah meningkatkan kepercayaan user

Langkah berikutnya

Lanjut ke [15. Testing di JavaScript/TypeScript/React].