Catatan Kuliah: Asinkronus di JavaScript

Pengantar Asinkronus

• Masalah umum saat belajar JavaScript: fungsi yang memanggil promise tetapi belum selesai.
• Pembahasan asinkronus, contoh sederhana untuk memahami.

Contoh Fungsi Sederhana

• Contoh fungsi 1, 2, 3:
  • Jika dijalankan secara urut: 1, 2, 3.
  • Jika menggunakan setTimeout pada fungsi 2:
    • Fungsi 1 dan 3 dieksekusi terlebih dahulu, baru fungsi 2 setelah 3 detik.

Penjelasan Sinkronis vs Asinkronus

• Sinkronus: Fungsi dieksekusi satu per satu, menunggu fungsi sebelumnya selesai.
• Asinkronus: Fungsi bisa berjalan secara paralel; tidak perlu menunggu fungsi lain selesai.

Ilustrasi Antrian

• Contoh dengan antrian:
  • Kasir memproses pesanan:
    • Pesanan yang lebih mudah dapat diproses lebih cepat walaupun dipesan setelahnya.
    • Contoh: Burger dan tahu gejrot.

Studi Kasus: Login dan Mendapatkan Data

1. Function Login: Mengembalikan token.
2. Function Get User: Memerlukan token untuk mengembalikan data pengguna.
3. Function Get Pictures: Memerlukan API key untuk mengembalikan gambar.

Proses Asinkronus pada Studi Kasus

• Proses login memiliki delay (misalnya 200ms), menyebabkan undefined jika tidak ditangani.
• Gunakan callback untuk menunggu proses selesai:
  • Contoh: Menangani hasil login dan mengakses API key.

Callback dan Nested Callback

• Callback digunakan untuk menangani proses asinkronus.
• Penggunaan nested callback dapat menjadi rumit dan menyulitkan pembacaan.

Penggunaan Promise

• Promise: Menangani asinkronus dengan cara yang lebih bersih:
  • Sukses dan gagal merupakan dua kemungkinan hasil.
• Contoh implementasi login menggunakan promise:
  • Mengembalikan token dan username jika berhasil, atau error jika gagal.

Menggunakan Async/Await

• async/await adalah pendekatan yang lebih modern dan bersih untuk menangani asinkronus:
  • Menggunakan await untuk menunggu promise selesai sebelum melanjutkan.
  • Contoh: Mendapatkan token, API key, dan gambar secara berurutan.

Penanganan Error

• Gunakan try/catch untuk menangani error saat menggunakan async/await.
• Berikan pesan error yang informatif.

Kesimpulan

• Asinkronus di JavaScript adalah konsep penting yang sering digunakan dalam pengembangan.
• Memahami callback, promise, dan async/await sangat krusial untuk bekerja dengan API atau operasi yang memerlukan waktu.