Daftar Isi Utama

• Lihat indeks lengkap di [01. Pengenalan]

Panduan ini untuk siapa

• Pembelajar yang mulai konsumsi API dan data real-time
• Pemula yang masih merasa alur async “nggak kebaca”
• Siapa pun yang pernah ketemu bug loading, double request, atau data ketuker

Apa yang akan Anda pelajari

• Kenapa async code wajib ada di JavaScript modern
• Dasar Promise dan kapan chaining masih relevan
• async/await, error handling, dan pola loading state yang praktis

Mengapa topik ini penting

Di aplikasi nyata, banyak proses itu async: ambil data API, upload file, validasi auth, sampai pencarian live. Kalau alur async belum rapi, UI terasa buggy walau kodenya kelihatan “benar.”

Kalau fondasi async Anda kuat, bug klasik seperti data telat tampil, spinner aneh, dan race condition jadi jauh lebih mudah dikendalikan.

Konsep inti

Dasar Promise

• pending, fulfilled, rejected
• .then(), .catch(), .finally()

Anggap Promise sebagai nilai yang datang belakangan, bukan langsung tersedia.

async/await

• Membuat alur async lebih mudah dibaca
• Tetap berbasis Promise di balik layar

Pakai async/await saat alur request mulai bertahap dan butuh keterbacaan tinggi.

Error handling

• Pakai try/catch pada operasi async
• Tampilkan pesan error yang ramah ke pengguna

Di produk nyata, error itu alur normal yang harus ditangani, bukan kasus langka.

Panduan langkah demi langkah

Langkah 1 — Mulai dari fetch berbasis Promise

Panggil satu endpoint publik lalu log hasil responsnya.

Langkah 2 — Ubah ke async/await

Ubah ke async/await, bungkus try/catch, lalu parse JSON.

Langkah 3 — Tambahkan model state UI

Kelola state loading, success, empty, dan error secara eksplisit.

Target bab ini: alur async jadi prediktif, bukan bikin kejutan.

Contoh praktis

Contoh 1 — Promise chain

fetch("https://jsonplaceholder.typicode.com/todos/1")
	.then((response) => response.json())
	.then((data) => console.log(data))
	.catch((error) => console.error(error));

Expected behavior:

• Data tampil saat request sukses
• Error tertangkap saat request gagal

Contoh 2 — async/await

async function getTodo() {
	try {
		const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
		const data = await response.json();
		console.log(data);
	} catch (error) {
		console.error("Request failed", error);
	}
}

Real case:

• Ini pola dasar yang sering dipakai di layer service/frontend API.

Kesalahan umum dan cara menghindarinya

• Lupa await -> nilai Promise bocor ke logic berikutnya
• Tidak ada error handling -> kegagalan jadi silent dan susah dilacak
• Request terpanggil berulang (mis. search input) -> tambahkan debounce/guard
• UI diupdate oleh respons lama -> track urutan request atau batalkan request usang

Mini Project

• Buat weather lookup app dengan:
• loading state,
• success state,
• empty state,
• error state.

Bonus:

• Tambahkan tombol “retry” saat request gagal.

Latihan cepat

• Ubah satu .then() chain ke async/await
• Tambahkan try/catch pada request API
• Tampilkan loading message sebelum data muncul
• Jelaskan dalam satu kalimat: kenapa respons usang bisa bikin UI tidak konsisten?

Ringkasan utama

• Async flow adalah fondasi behavior aplikasi modern
• async/await bikin alur lebih kebaca, tapi state tetap harus dikelola rapi
• Loading/error/empty state itu kebutuhan produk, bukan sekadar bonus

Langkah berikutnya

Lanjut ke [09. Dasar-Dasar React].