Async/await adalah fitur yang hadir sejak ES2017. Fitur ini mempermudah kita dalam menangani proses asynchronous.Async/Await merupakan sebuah syntax khusus yang digunakan untuk menangani Promise agar penulisan code lebih efisien dan rapih.Async/Await terbagi menjadi Async dan Await, mari kita lihat contohnya.
const getAllUser = async []=> {const data = await getUser[]console.log[data]}
Pada contoh diatas, pertama kita memiliki function dengan menambahkan async didepan function yang mana berfungsi untuk menjadikan function tersebut asynchronous, dan await berfungsi menunda eksekusi hingga proses asynchronous selesai, dari kode di atas berarti console.log[data] tidak akan di eksekusi sebelum proses getUser[] selesai. await juga bisa digunakan berkali-kali di dalam function.
Penjelasan penggunaan Async Await
- Async/Await adalah salah satu cara untuk mengatasai masalah asynchronous pada Javascript selain menggunakan callback dan promise.
- Pada implementasi Async/Await, kita menggunakan kata kunci async sebelum fungsi. Await sendiri hanya bisa digunakan pada fungsi yang menggunakan async.
- Untuk menggunakan Async/Await, kembalian dari suatu fungsi harus merupakan suatu Promise. Async/Await tidak dapat berdiri tanpa adanya Promise.
- Tidak seperti Promise, dengan Async/Await maka suatu baris kode dapat tersusun rapi mirip dengan kode yang sifatnya synchronous.
- Setiap baris yang menggunakan await, akan ditunggu sampai Asynchronous Promise tersebut di resolve.
Error Handling Async/Await
Untuk menghandle error Async/Await kita dapat menggunakan try catch di dalam function yang kita buat, sehingga jika terjadi error kita dapat menangkap errornya dalam block catch, berikut contoh penggunaannya.
const getAllUser = async []=> {try {const result = await getUser[]console.log[result]} catch [error] {console.log[error]}}
Sulfikardi
Web Design & Web Programming
Halo, saya seorang Web Developer yang terbiasa mengembangkan website menggunakan HTML, CSS, Javascript, PHP, MYSQL, dan Laravel. Disini saya akan membagikan pengalaman saya dalam membangun dan mengembangan website yang responsif dan dinamis
Jika anda baru menggeluti bahasa pemrograman javascript, tentunya anda sering
menemukan kode yang dieksekusi secara synchronous maupun asynchronous. Oke, kali ini kita sebut saja kedua istilah itu sync
untuk synchronous dan async
untuk asynchronous.
Process
Secara default, javascript diproses dalam baris perbaris, artinya setiap baris kode tidak akan dieksekusi sebelum baris kode
sebelumnya selesai diproses. Semua proses akan ditampung dan dikenal dengan istilah call stack
.
Synchronous
Synchronous [sync
], merupakan mode default dalam proses eksekusi perintah kode. Perhatikan baris kode berikut
function tanyaKabar[name] {
console.log['Apa kabar,', name];
}
function katakanHallo[name] {
console.log['Hallo,', name];
}
katakanHallo['Guntur'];
tanyaKabar['Gun'];
Jika kita eksekusi kode diatas, maka pada layar console
dibrowser anda akan muncul seperti gambar berikut
Sepertinya semua berjalan dengan baik, tidak ada yang aneh dan baik-baik saja. Hahaa.
Asynchronous
Jika pada sync
, kode diproses baris perbaris, maka di async
kode diproses secara baris perbaris juga. Hah..., maksudnya, lantas perbedaannya apa?
Dalam skenario-nya, sebenarnya kode
async
telah diproses, hanya saja sebatas penjadwalan untuk dieksekusi pada tahapan berikutnya. Artinya, kode yang berperilaku async
tidak akan langsung dieksekusi, tetapi di skip
dan akan melakukan eksekusi baris perintah berikutnya.
function tanyaKabar[name] {
console.log['Apa kabar,', name];
}
function katakanHallo[name] {
setImmediate[function [] {
console.log['Hallo,', name];
}];
}
katakanHallo['Guntur'];
tanyaKabar['Gun'];
Mari kita eksekusi kode diatas dan perhatikan hasilnya
Terlihat perbedaan pada urutan proses eksekusinya. Fungsi katakanHallo['Guntur']
tidak langsung dieksekusi, sebab penerapannya menggunakan asynchronous
dalam body fungsi katakanHallo
.
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
.
Kesimpulan
Yang perlu digarisbawahi adalah bagaimana cara kita untuk mengurutkan setiap baris-baris perintah agar dapat diproses dan dieksekusi sesuai tujuan.
Setiap kode yang akan dituliskan tidak selalu menggunakan synchronous
ataupun asynchronous
, itu selalu bergantung pada kebutuhan sebuah proses program.
Terkait
- Handle Async Dengan Callback
- Handle Async Dengan Promises