DEV Community

Cover image for Memanfaatkan Promise.all()
Hadi Hidayat Hammurabi
Hadi Hidayat Hammurabi

Posted on

Memanfaatkan Promise.all()

Menunggu beberapa proses asynchronous dengan 1 kali await.

Hal menarik yang disediakan oleh Javascript salah satunya adalah kita dapat melakukan proses secara tidak sinkron (asynchronous) sehingga tidak terjadi saling tunggu antar proses. Dalam praktiknya, proses asynchronous ini digunakan untuk proses-proses yang waktu tunggunya tergantung pada hal di luar proses itu sendiri, seperti koneksi internet, kecepatan penyimpanan, dll. Contoh proses yang dapat dilakukan secara asynchronous:

  • Query database
  • Mengambil data dari web lain (HTTP Request)
  • Menulis/membaca isi file
  • Mengirim email

Menjalankan Fungsi Secara Asynchronous

Setiap proses yang asynchronous, di Javascript, umumnya dilakukan dengan memanfaatkan fungsi. Adapun fungsi adalah kumpulan aktivitas tertentu untuk memenuhi suatu kebutuhan, contoh fungsi penjumlahan untuk menjumlahkan, fungsi shutdown untuk mematikan komputer (mungkin saja ada ya πŸ˜…).

Mendefinisikan Fungsi

Mendefinikan fungsi yang asynchronous dapat dilakukan dengan menambah kata async saat pembuatan fungsi, selebihnya sama seperti fungsi biasa.

Contohnya kita akan melakukan proses kirim email secara asynchronous, dapat didefinisikan seperti ini:

async function kirimEmail(tujuan, judul, isi) {
  // mengirim email
  // ...
}
Enter fullscreen mode Exit fullscreen mode

atau bila menggunakan arrow function:

const kirimEmail = async (tujuan, judul, isi) => {
  // mengirim email
  // ...
}
Enter fullscreen mode Exit fullscreen mode

Memanggil Fungsi

Saat fungsi diatas kita panggil, secara otomatis fungsi akan dijalankan secara asynchronous yang artinya tidak saling tunggu.

Contoh:

kirimEmail('contoh1@email.com', 'Tes 1 Email', 'Halo. Ini saya lagi ngetes.');
kirimEmail('contoh2@email.com', 'Tes 2 Email', 'Halo. Ini saya lagi ngetes.');
kirimEmail('contoh3@email.com', 'Tes 3 Email', 'Halo. Ini saya lagi ngetes.');
Enter fullscreen mode Exit fullscreen mode

Dari contoh di atas, seluruh proses kirim email, dilakukan secara berurutan namun mengabaikan kapan harus selesai. Jadi saat proses lain di jalankan, maka akan disusul proses berikutnya tanpa menunggu berhentinya proses tersebut.

Apabila kita membutuhkan data atau sengaja menunggu proses yang asynchronous, dapat dilakukan dengan menambah await saat pemanggilan fungsi.

Contoh:

await kirimEmail('contoh1@email.com', 'Tes 1 Email', 'Halo. Ini saya lagi ngetes.');
await kirimEmail('contoh2@email.com', 'Tes 2 Email', 'Halo. Ini saya lagi ngetes.');
await kirimEmail('contoh3@email.com', 'Tes 3 Email', 'Halo. Ini saya lagi ngetes.');
Enter fullscreen mode Exit fullscreen mode

Dari contoh di atas, tiap proses akan ditunggu hingga selesai. Keadaan ini terjadi biasanya bila ada data yang kita butuhkan untuk proses yang selanjutnya sehingga harus menunggu proses sampai mendapatkan data tersebut.

Promise.all()

Dengan Promise.all, kita dapat memanggil dan menunggu beberapa fungsi asynchronous menjadi satu kesatuan.

Memanggil Fungsi

Pemanggilan fungsi-fungsi asynchronous dengan Promise.all dapat dilakukan dengan contoh sebagai berikut.

await Promise.all([
  kirimEmail('contoh1@email.com', 'Tes 1 Email', 'Halo. Ini saya lagi ngetes.'),
  kirimEmail('contoh2@email.com', 'Tes 2 Email', 'Halo. Ini saya lagi ngetes.'),
  kirimEmail('contoh3@email.com', 'Tes 3 Email', 'Halo. Ini saya lagi ngetes.'),
]);
Enter fullscreen mode Exit fullscreen mode

Dari contoh di atas, kita menunggu ketiga proses pengiriman email yang hasilnya baik berhasil maupun gagal akan menjadi kesatuan yaitu dalam bentuk array.

Sifat-Sifat

Berikut ini sifat-sifat Promise.all:

  • fungsi asynchronous yang akan dijalankan, diletakkan secara bersamaan dalam sebuah array;
  • seluruh fungsi yang dimasukkan akan menjadi kesatuan, mulai dari dijalankan hingga mendapatkan hasil;
  • karena menjadi kesatuan, seluruh proses akan ditunggu hingga selesai, terutama saat kita menggunakan await;
  • bila terjadi error pada salah satu proses, maka seluruh proses akan error.

Lebih lengkap dapat ditemukan di dokumentasi Promise.all dari MDN.

Penutup

Menggunakan Promise.all sangat menguntungkan, setidaknya kita cukup 1 kali menulis await πŸ˜‚ dan juga bila kita ingin seluruh proses berhenti saat salah satunya terjadi error. Tetapi, kalau kita ingin tetap melanjutkan proses meskipun terjadi error pada proses tertentu, kita akan bahas di artikel berikutnya.

Terima kasih sudah baca. Kalau mau diskusi, komen aja. Kalau mau berteman, bilang aja 😎

Top comments (0)