Tutorial Pemrograman & Komputer Part 42: Asynchronous Programming dengan Promises di JavaScript

Pendahuluan

Selamat datang di part 42 seri tutorial Pemrograman & Komputer kita! Di part sebelumnya, kita membahas manajemen konkurensi di PHP menggunakan Mutex. Sekarang, kita akan beralih ke JavaScript dan mempelajari cara menangani operasi yang memakan waktu lama tanpa memblokir thread utama menggunakan Asynchronous Programming dengan Promises. Ini sangat penting untuk membangun aplikasi web responsif dan modern. Prasyarat untuk tutorial ini adalah pemahaman dasar tentang JavaScript dan fungsi.

Konsep Dasar

Bayangkan Anda sedang memesan kopi di sebuah kafe. Pendekatan sinkron akan mengharuskan Anda menunggu di depan kasir sampai kopi Anda selesai dibuat, menghalangi pelanggan lain untuk memesan. Pendekatan asinkron memungkinkan Anda memesan kopi, mendapatkan nomor antrian, dan melakukan hal lain (seperti membaca buku atau memeriksa email) sambil menunggu kopi Anda siap. Saat kopi Anda selesai, nomor Anda dipanggil.
Dalam pemrograman, operasi asinkron memungkinkan program Anda untuk terus berjalan sambil menunggu tugas yang memakan waktu lama (seperti mengambil data dari server atau membaca file) untuk selesai. Promises adalah cara untuk menangani hasil dari operasi asinkron ini di JavaScript.

Apa itu Promise?

Sebuah Promise mewakili hasil yang mungkin terjadi (atau kegagalan) dari sebuah operasi asinkron. Promise memiliki tiga status:

• Pending: Status awal, operasi sedang berjalan.
• Fulfilled: Operasi berhasil diselesaikan.
• Rejected: Operasi gagal.

Hands-on Coding

Mari kita buat contoh sederhana untuk mengambil data dari server (simulasi) menggunakan Promise.

function fetchData() {
 return new Promise((resolve, reject) => {
 setTimeout(() => {
 const data = { name: 'John Doe', age: 30 };
 // Simulasi keberhasilan
 if (Math.random() > 0.2) { 
 resolve(data); 
 } else {
 // Simulasi kegagalan
 reject('Failed to fetch data!');
 }
 }, 2000); // Simulasi penundaan 2 detik
 });
}

fetchData()
 .then(data => {
 console.log('Data fetched:', data);
 }) 
 .catch(error => {
 console.error('Error:', error);
 });

console.log('Fetching data...'); // Ini akan dieksekusi SEBELUM data diambil.

Penjelasan Kode:

• function fetchData(): Mendefinisikan fungsi yang mengembalikan Promise.
• new Promise((resolve, reject) => { ... }): Membuat Promise baru. Konstruktor Promise menerima fungsi dengan dua argumen: resolve (dipanggil saat operasi berhasil) dan reject (dipanggil saat operasi gagal).
• setTimeout(() => { ... }, 2000): Mensimulasikan operasi asinkron yang memakan waktu 2 detik.
• resolve(data): Menyelesaikan Promise dengan data jika berhasil.
• reject('Failed to fetch data!'): Menolak Promise dengan pesan kesalahan jika gagal.
• fetchData().then(data => { ... }).catch(error => { ... }): Menggunakan metode .then() untuk menangani hasil yang berhasil (fulfilled) dan .catch() untuk menangani kesalahan (rejected).
• console.log('Fetching data...'): Ini akan dicetak terlebih dahulu karena fetchData() berjalan secara asinkron.

Common Pittfalls

• Lupa menangani kesalahan (Rejection): Selalu gunakan .catch() untuk menangani kasus di mana Promise ditolak. Jika tidak, kesalahan mungkin tidak terdeteksi.
• Promise Hell (Callback Hell versi Promises): Terlalu banyak rantai .then() yang bersarang dapat membuat kode sulit dibaca dan dipelihara. Pertimbangkan untuk menggunakan async/await (yang akan kita bahas di tutorial selanjutnya).
• Tidak mengembalikan Promise dari fungsi .then(): Jika Anda tidak mengembalikan Promise baru dari fungsi .then(), rantai Promise akan terputus.

Challenge

Modifikasi contoh di atas untuk:

1. Mengambil data dari API publik (misalnya, menggunakan fetch API).
2. Menampilkan data yang diambil di halaman web menggunakan DOM manipulation.
3. Menangani berbagai jenis kesalahan (misalnya, kesalahan jaringan, kesalahan server).

Sumber Referensi

• MDN Web Docs: Promise
• JavaScript.info: Promise basics
• freeCodeCamp: JavaScript Promise Tutorial