1. Dari Callback Hell ke Promises
Sebelum ada Promises, operasi asinkron yang berurutan (misal: login user -> ambil daftar transaksi -> ambil detail barang) menghasilkan piramida callback bersarang yang mustahil dibaca. Promise adalah object yang mewakili penyelesaian atau kegagalan dari suatu operasi asinkron.
3 Status Sebuah Promise
1. **Pending**: Operasi sedang berlangsung di latar belakang.
2. **Fulfilled (Resolved)**: Operasi berhasil dan membawa data hasil.
3. **Rejected**: Operasi gagal dan membawa error/alasan penolakan.
2. Sintaks Elegan: Async / Await
`async/await` adalah syntactic sugar di atas Promises yang memungkinkan kita menulis kode asinkron dengan gaya sekuensial yang mirip kode sinkron biasa.
Contoh Async/Await dengan Try-Catch
javascript
| 1 | async function ambilDataDashboard(userId) { |
| 2 | try { |
| 3 | console.log("Mengambil profil user..."); |
| 4 | const resUser = await fetch(`https://api.kulodev.id/users/${userId}`); |
| 5 | const user = await resUser.json(); |
| 6 | |
| 7 | console.log("Mengambil riwayat transaksi..."); |
| 8 | const resTransaksi = await fetch(`https://api.kulodev.id/orders?user=${userId}`); |
| 9 | const transaksi = await resTransaksi.json(); |
| 10 | |
| 11 | return { |
| 12 | profil: user, |
| 13 | riwayat: transaksi |
| 14 | }; |
| 15 | } catch (error) { |
| 16 | console.error("⚠️ Gagal memuat data dashboard:", error.message); |
| 17 | throw error; |
| 18 | } |
| 19 | } |
3. Menjalankan Banyak Request Paralel: Promise.all
Jika dua request tidak saling bergantung, jangan gunakan `await` satu per satu karena akan lambat. Gunakan `Promise.all` untuk mengeksekusinya secara bersamaan (paralel)!
Paralelisasi dengan Promise.all
javascript
| 1 | // Berjalan bersamaan dalam 1 waktu! |
| 2 | const [kursus, user, pengumuman] = await Promise.all([ |
| 3 | fetch("/api/courses").then(r => r.json()), |
| 4 | fetch("/api/profile").then(r => r.json()), |
| 5 | fetch("/api/announcements").then(r => r.json()), |
| 6 | ]); |
Kuis Pemahaman
+10 XP
Kapan kita sebaiknya menggunakan `Promise.all` dibandingkan melakukan `await` berurutan?