Cara menggunakan ASYNCHRONIZE pada JavaScript

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

1. Async/Await adalah salah satu cara untuk mengatasai masalah asynchronous pada Javascript selain menggunakan callback dan promise.
2. Pada implementasi Async/Await, kita menggunakan kata kunci async sebelum fungsi. Await sendiri hanya bisa digunakan pada fungsi yang menggunakan async.
3. Untuk menggunakan Async/Await, kembalian dari suatu fungsi harus merupakan suatu Promise. Async/Await tidak dapat berdiri tanpa adanya Promise.
4. Tidak seperti Promise, dengan Async/Await maka suatu baris kode dapat tersusun rapi mirip dengan kode yang sifatnya synchronous.
5. 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

Apa itu asynchronous JavaScript?

Kapan kita menggunakan async Await?

Apa itu synchronous dan asynchronous dalam pemrograman?

Apa itu Await di JavaScript?