Penjelasan Sederhana Cara Menggunakan Await, Async, dan Promise
Dalam satu titik di perjalanan coding kita, pasti pernah datang satu hari di mana kita berpikir “harusnya 1 baris ini dijalankan setelah function di atasnya selesai”.
Dan saya mengerti betapa frustasinya mencari jalan keluar lain untuk mengatasi hal tersebut.
Kalau Anda sama dengan saya, callback function menjadi penyelamat pada situasi seperti itu.
Lalu setelah menggunakan callback sana sini, kita frustasi lagi karena sekarang kode kita jadi terlihat seperti cacing dan mata mulai perih karena fokus memperhatikan indentation di mana-mana.
Kondisi ini dikenal dengan sebutan callback-hell.
Mungkin tidak terlalu pusing kalau hanya segini, tapi bayangkan kalau satu function terdiri dari 100 kode dan 10 indentasi, bagaimana?
Yang tidak pernah dijelaskan di blog lain
Di momen pertama kali saya mengerti cara menggunakan Async-Await, saya sedikit kesal dengan blog-blog yang saya baca sebelumnya.
Kenapa? Karena mereka tidak memperkenalkan satu lagi elemen penting yang menunjang berhasil atau tidaknya kita menggunakan fitur ini.
Yaitu: Promise
Untuk bisa menggunakan async-await, kita harus mengerti kalau mereka bertiga diciptakan untuk digunakan secara bersamaan.
Banyak blog yang saya baca hanya menjelaskan dari async sampai await tanpa memberitahu kalau yang bisa di- await hanyalah function yang meng- return sebuah Promise.
Kita akan bahas satu per satu
1. Async
Segala function yang tidak diberi notasi async adalah synchronous function dan tidak bisa menggunakan await
Mengubah function menjadi async tidak akan membuat kode kita error.
Jadi mari kita pahami terlebih dahulu cara membuat sebuah function biasa menjadi sebuah async function.
Synchronous Function:
Asynchronous Function 1:
Asynchronous Function 2:
Perbedaannya hanya terletak pada satu buah kata yang kita letakkan di bagian deklarasi function.
Kalau kita sudah mengubah function menjadi async, artinya kita sekarang sudah bisa ‘menunggu’ sebuah function diselesaikan dengan notasi tambahan berikut:
2. Await
Sesuai dengan artinya, perintah ini memastikan sebuah function ditunggu hingga selesai sebelum function yang kita tulis dilanjutkan ke baris berikutnya.
Contoh penggunaan:
Jika function jalankan() kita panggil, maka output di console akan menjadi
Seperti yang sudah saya jelaskan, function jalankan() akan menunggu hingga function tunggu_saya() selesai baru menjalankan baris berikutnya.
Jika function jalankan() tidak dibuat menjadi async, output yang tercipta akan menjadi seperti ini
Nah, jadi bagaimana bisa program tahu bahwa function sudah selesai dijalankan?
Di sinilah peran Promise.
3. Promise
Promise itu sendiri sebenarnya sudah merupakan pembicaraan yang panjang.
Tapi singkatnya, Promise adalah sebuah object yang mempunyai callback yang berfungsi untuk memberitahu kalau function sudah selesai dijalankan.
Function dinyatakan selesai jika resolve() sudah dipanggil.
Sehingga await pada async function akan menunggu hingga resolve() dipanggil sebelum melanjutkan ke baris berikutnya.
Jika kita memberi await pada sebuah fungsi yang tidak mengembalikan Promise, maka tidak akan ada yang terjadi.
Fungsi tersebut tidak akan ditunggu dan kode akan terus dieksekusi.
Contoh Penggunaan: Fetch
Kalau Anda sama seperti saya, kita sering menggunakan fungsi-fungsi yang berisi Promise tanpa kita sadari. Contohnya: fetch
Fetch adalah sebuah fungsi yang mengembalikan Promise. Biasanya kita akan menuliskannya seperti ini
Pro Tip: Semua fungsi yang bisa menggunakan
.thendan.catchadalah fungsi yang mengembalikan Promise
Dua kali fetch? Biasanya kita akan menuliskannya seperti ini.
Tapi bisakah kode ini menjadi lebih baik? (Dalam artian lebih mudah dibaca dan dipahami)
Karena jika tetap menuliskannya seperti ini, kita akan menggunakan banyak sekali .then dan .catch di sana dan di sini.
Dan inilah yang akan menggiring kita ke dalam callback-hell.
Untungnya, bisa.
Fetch dengan lebih baik
Menggunakan async-await, fungsi fetch di atas bisa kita ubah menjadi jauh lebih mudah dibaca.
Kunci perkembangannya di sini adalah: Readability
Hasilnya:
Dengan async-await, sekarang kita bisa melakukan bahkan 2x fetch tanpa tambahan indentasi dan kode kita jadi lebih mudah dimengerti.
Extra: Try-Catch
Pada contoh di atas selain menggunakan async-await saya juga menggunakan try-catch
Fungsinya agar saya bisa hanya menggunakan 1 catch untuk semua promise. Dan dengan block try catch tersebut.
Selain itu, saya juga sekarang bisa melakukan validasi hanya dengan 1 baris kode saja. Contoh:
Saya harap penjelasan super sederhana ini — atau setidaknya saya sudah berusaha membuatnya ‘super’ sederhana, bisa membantu Anda sedikit lebih memahami tentang cara menggunakan async function pada kode Anda.
