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

Callback dan kenapa ia jadi menyiksa

Cara asli mengerjakan async, masalah bersarang yang ditimbulkannya, dan jebakan penanganan error-nya.

Baca 22 menit

Setelah pelajaran ini kamu bisa

Menulis dan memakai callback untuk pekerjaan asinkron
Mengikuti konvensi callback error-first ala Node
Menjelaskan kenapa callback bersarang dalam jadi masalah
Menyebutkan dua bug callback yang klasik

Callback adalah function yang kamu serahkan ke sesuatu supaya ia bisa memanggilmu kembali saat selesai. Ini cara asli mengerjakan hal asinkron di JavaScript, dan sampai sekarang ia jadi dasar setiap event listener yang akan kamu tulis.

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.

Urutannya itulah intinya. Baris 2 tidak menunggu user-nya. Ini penyesuaian tersulit bagi orang yang datang dari bahasa di mana setiap baris selesai sebelum baris berikutnya mulai.

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.

Konvensi error-first

Callback tidak bisa throw secara berguna — saat ia jalan, block try di sekitar pemanggilan aslinya sudah lama hilang. Node menyelesaikannya dengan konvensi: argument pertama selalu berupa error, atau null kalau semuanya lancar.

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.

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.

Callback hell

Kalau setiap langkah butuh hasil langkah sebelumnya, callback jadi bersarang. Tiga tingkat masih terkelola. Enam tingkat tidak terbaca, dan penanganan error-nya harus diulang di setiap tingkat. Bentuk ini dikenal sebagai callback hell atau pyramid of doom.

getUser(id, (error, user) => {
  if (error) return handle(error);
  getBookings(user.id, (error, bookings) => {
    if (error) return handle(error);
    getVenue(bookings[0].venueId, (error, venue) => {
      if (error) return handle(error);
      getOwner(venue.ownerId, (error, owner) => {
        if (error) return handle(error);
        // Four levels deep, and the real work finally starts.
        render(user, bookings, venue, owner);
      });
    });
  });
});

Dua pelajaran berikutnya meratakan ini jadi sesuatu yang bisa kamu baca dari atas ke bawah.

Tugas praktik

Tulis delay(ms, callback) yang memanggil callback-nya setelah ms milidetik. Lalu pakai tiga kali berurutan untuk mencetak "satu", "dua", "tiga" secara berurutan, masing-masing berjarak 10ms — dengan cara bersarang. Lalu lihat seberapa dalam indentasinya cuma untuk tiga langkah sepele.

Hasil yang diharapkan

satu, dua, tiga — total sekitar 30ms

Tampilkan contoh solusi

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

function delay(ms, callback) {
  setTimeout(callback, ms);
}

delay(10, () => {
  console.log("one");
  delay(10, () => {
    console.log("two");
    delay(10, () => {
      console.log("three");
      console.log("...and that is only three steps.");
    });
  });
});