Lompat ke konten
Dasbor
Kembali ke modul

Cara JavaScript Berjalan: Engine, Event Loop, Async · 7/9

async dan await

Promise yang ditulis agar terbaca dari atas ke bawah — plus kesalahan berurutan padahal maksudnya paralel.

Baca 30 menit

Setelah pelajaran ini kamu bisa

  • Menulis ulang rantai promise jadi async/await
  • Menangani error dengan try/catch di sekitar await
  • Menemukan dan memperbaiki kesalahan berurutan padahal maksudnya paralel
  • Menjelaskan apa yang sebenarnya dikembalikan sebuah async function

async dan await adalah sintaks di atas promise. Tidak ada hal baru yang terjadi di dalamnya: promise yang sama, event loop yang sama. Yang berubah adalah kode asinkron jadi terbaca dari atas ke bawah, seperti kode sinkron yang sudah kamu pahami.

  • async sebelum sebuah function berarti ia selalu mengembalikan promise, apa pun yang kamu tulis di dalamnya.
  • await sebelum sebuah promise berarti berhenti di sini sampai ia selesai, lalu lanjut dengan value-nya.
  • await hanya boleh di dalam function async, atau di level teratas sebuah module.
Coba sendiri

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Rantai yang sama, ditulis ulang

Coba sendiri

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

try/catch berfungsi lagi

Karena await menjeda *di dalam* block try, sebuah rejection bisa ditangkap oleh try/catch biasa. Inilah perbaikan untuk masalah di akhir pelajaran soal error.

Coba sendiri

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Berurutan versus paralel

Ini kesalahan yang membuat aplikasi nyata jadi lambat, dan mudah terjadi karena versi yang salah justru kelihatan rapi. Setiap await itu menunggu. Kalau tiga request tidak saling bergantung, menunggunya satu per satu melipattigakan waktu muatmu tanpa alasan.

Coba sendiri

Tiga request yang sama, pekerjaan yang sama, total waktu yang sangat berbeda.

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Coba sendiri

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Tugas praktik

Function ini lebih lambat dari seharusnya. Tulis ulang supaya pekerjaan yang independen bisa tumpang-tindih, lalu pastikan waktunya membaik: async function load(id) { const user = await getUser(id); const settings = await getSettings(id); const notices = await getNotices(id); return { user, settings, notices }; } — anggap ketiganya hanya butuh id.

Hasil yang diharapkan

Kira-kira selama panggilan terlambat saja, bukan jumlah ketiganya.

Tampilkan contoh solusi

Coba dulu minimal sepuluh menit sebelum membuka ini. Bagian yang terasa susah itu justru yang mengajari kamu.

async function load(id) {
  const [user, settings, notices] = await Promise.all([
    getUser(id),
    getSettings(id),
    getNotices(id),
  ]);
  return { user, settings, notices };
}

Cek pemahaman

Tiga panggilan API yang independen, masing-masing 100ms, ditulis sebagai tiga await berurutan. Berapa lama, dan apakah itu benar?

Pilih jawaban dulu