Proses asynchronous sering digunakan untuk komunikasi data, karena data menjadi bagian inti dari sebuah aplikasi maka konsep asynchronous sangat penting untuk dipahami. Show
Single ThreadedSelain termasuk Interpreted Language dan Dynamic-Typed Language, JavaScript juga termasuk Single Threaded Programming Language. Yaitu JavaScript hanya bisa melakukan satu operasi di satu waktu, sehingga code JavaScript dieksekusi secara berurutan dari atas ke bawah layaknya sebuah antrian atau biasa disebut synchronous.
Namun hal ini bisa menjadi masalah jika terdapat code yang eksekusinya membutuhkan waktu yang lama, seperti code untuk mendownload data dari server. Kita tidak tahu berapa lama waktu yang dibutuhkan untuk download data tersebut. Jika mengikuti mekanisme synchronous dimana JavaScript hanya bisa melakukan satu operasi di satu waktu maka seharusnya JavaScript akan berhenti dan tidak akan mengeksekusi code selanjutnya sebelum download selesai. Kenyataannya kita masih bisa melakukan aktifitas browsing meskipun download sedang berlangsung dan browser tidak hang.
Bagaimana JavaScript bisa melakukannya?Jawabannya adalah JavaScript melakukannya secara asynchronous. Pada konsep asynchronous, code akan dieksekusi tanpa menunggu eksekusi code lain selesai sehingga seakan-akan dieksekusi secara bersamaan. Kita bisa menggunakan simulasi berikut:
setTimeout pada code di atas membuat kata the time has come akan ditampilkan setelah 3 detik. Namun JavaScript tidak akan menunggu selama 3 detik tapi akan segera menampilkan kata to learn how to code. Sehingga hasilnya:
Berikut gambaran perbedaan antara synchronous, asynchronous, dan asynchronous pada javascript: Synchronous
Asynchronous
Asynchronous pada JavaScript
Event LoopUntuk lebih memahami asynchronous pada JavaScript kita perlu mengetahui apa itu Event Loop. Event loop adalah bagian dari JavaScript Runtime yang bertugas untuk menangani Event Callback, Event Callback sendiri adalah bagian dari code yang dieksekusi setelah event tertentu. Contoh Kasus: Klik tombol Download di browser.
Ketika event terjadi maka callback dari event tersebut akan ditempatkan pada suatu tempat yang disebut Event Handler Queue atau Queue. Event Loop akan terus memonitor Queue dan akan mengeksekusi callback sesuai urutan siapa yang pertama masuk ke dalam Queue.
Ada 3 teknik yang digunakan untuk menghandle proses asynchronous pada JavaScript:
Callback JavaScriptCallback adalah function yang menjadi argument untuk function lain dan akan dieksekusi pada poin tertentu, bisa jadi saat ini atau nanti. Contoh
Output dari code di atas adalah:
Pada code di atas function notify adalah callback function, dipanggil setelah code console.log(Downloading from \${url}....);. 💡 INFOMenjadikan function sebagai argument untuk function yang lain adalah sesuatu yang mungkin di JavaScript, karena function pada JavaScript adalah First-Class Object. Yang berarti function memiliki karakter yang sama dengan object. Sehingga sebuah function dapat:
Nested CallbackKita bisa menambahkan callback di dalam callback.
Code di atas dieksekusi tanpa error dan menghasilkan ouput yang sesuai dengan perkiraan.
Namun kondisi ini bisa mengarah ke suatu masalah yang disebut dengan Callback Hell, yaitu kondisi dimana terlalu banyak callback di dalam callback yang lain. Callback Hell membuat code sulit untuk dipahami dan sulit diperbaiki jika ditemukan bug di dalamnya. Sebagai gantinya kita bisa menggunakan Promise. PromisePromise bisa dikatakan sebagai object yang menyimpan hasil dari sebuah operasi asynchronous baik itu hasil yang diinginkan (resolved value) atau alasan kenapa operasi itu gagal (failure reason). Kita ambil contoh seperti saat kita memesan ojek online. Saat kita mencari driver lewat aplikasi, aplikasi akan berjanji(promise) memberi tahu hasil dari pencarian kita. Hasilnya bisa diantara dua, yaitu driver ditemukan (resolved value) atau alasan kenapa driver tidak ditemukan(failure reason). Sebuah Promise berada di salah satu diantara 3 kondisi(state):
Sama seperti pada kasus memesan ojek online, status permintaan kita pada aplikasi online diantara tiga kondisi:
Membuat PromiseKeyword yang dipakai untuk membuat Promise adalah Promise.
Function setelah keyword new Promise disebut executor. Dan di dalam executor terdapat dua callback function:
Promise HandlerSelanjutnya untuk merespon hasilnya (baik berupa value atau error) kita perlu menambahkan handler. Handler biasanya berupa function dan ditempatkan di dalam method bernama then().
sedangkan untuk merespon error kita bisa tambahkan method catch().
Promise ChainingKarena output dari method then() dan catch() adalah sebuah Promise, maka kita bisa merangkainya(chain) dengan Promise yang lain.
Promise.all()Method Promise.all() digunakan untuk mengeksekusi Promise secara paralel. Output dari Promise.all() adalah sebuah promise.
Callback vs PromiseSeperti yang disebutkan sebelumnya bahwa kita bisa menggunakan promise untuk mengatasi masalah callback hell. ❌ Callback Hell
✔️ Promise
Async AwaitAsync/Await diperkenalkan di ES8 / ES2017 untuk menghandle operasi asynchronous dengan syntax yang lebih mirip dengan synchronous. Async/Await sendiri dibuat di atas Promise. Kita bisa membuat simulasi proses download menggunakan code dibawah ini.
Pada code di atas keyword await membuat function download harus menunggu sampai function getStatus() selesai dieksekusi.
Promise vs Async AwaitSekarang mari kita update code sebelumnya yang menggunakan Promise menjadi menggunakan Async/Await. Promise
Async/Await
Kita juga bisa menggunakan arrow function.
Apa itu asynchronous JavaScript?Jawabannya adalah JavaScript melakukannya secara asynchronous. Pada konsep asynchronous, code akan dieksekusi tanpa menunggu eksekusi code lain selesai sehingga seakan-akan dieksekusi secara bersamaan. setTimeout pada code di atas membuat kata the time has come akan ditampilkan setelah 3 detik.
Kapan menggunakan asynchronous?Kapan Menggunakan Async? Pemanfaatan async sangat berguna pada saat melakukan operasi-operasi yang tidak harus menunggu proses yang lainnya. Misalnya, memanipulasi DOM ketika melakukan proses ajax . Agar bisa memahami, kita perlu mengetahui cara menghandle kode async tersebut dengan cara callback ataupun promises .
Fungsi async untuk apa?Asynchronous network server programming adalah sebuah pendekatan dalam komunikasi server dimana server dapat saling berkomunikasi, mengirim, dan menerima data dengan bersamaan tanpa harus menghentikan komunikasi dengan client lain.
Apa itu Await di JS?Keyword await membuat JavaScript menunggu sampai promise tersebut selesai dan mengembalikkan hasilnya.
|