Belajar JavaScript - Penjelasan Async/Await, Callbacks dan Promises pada JavaScript
Ngulik Kode - Jika kalian sebelumnya pernah belajar JavaScript, pasti kalian pernah
mendengar istilah "asynchronous" sebelumnya.
Ini karena JavaScript merupakan bahasa yang bersifat asynchronous; Tapi apa maksudnya? Ok, dalam artikel kali ini saya akan menunjukkan bahwa konsepnya tidak sesulit kedengerannya.
Synchronous vs Asynchronous
Secara default, JavaScript adalah asynchronous, bahasa pemrograman single
threaded. Ini berarti bahwa instruksinya hanya dapat berjalan satu per satu,
dan tidak secara paralel. Contohnya begini:
Kode di atas cukup sederhana ⎼ menjumlahkan dua angka dan kemudian mencatat
jumlah tersebut ke konsol. Interpreter (penerjemah) mengeksekusi instruksi
ini satu demi satu dalam urutan itu sampai selesai.
Tapi ada beberapa kekurangan pada metode ini. Katakanlah kita ingin
mengambil sejumlah besar data dari database dan kemudian kita tampilkan di
browser. Ketika interpreter sedang menjalankan instruksi, contoh mengambil
data database dan misal membutuhkan beberapa waktu, maka kode berikutnya
harus menunggu sampai interpreter ini selesai menjalan instruksi yang tadi.
Sekarang mungkin kalian bilang bahwa data yang diambil tidak terlalu besar dan tidak akan memakan waktu lama. Bayangkan kalian harus fetching/mengambil data dibeberapa API yang berbeda. Dan harus menunggu antrean satu per satu hingga selesai. Seperti hal yang melelahkan ya?
Nah untungnya JavaScript telah mempunyai solusi dari masalah synchronous ini
dengan memperkenalkan asynchronous JavaScript.
Dengan asynchronous ini, kode dapat dijalankan sekarang, selesainya nanti.
JavaScript kan berjalan secara synchronous/berurutan nih, sekarang
instruksinya tidak harus berurutan atau dieksekusi satu per satu seperti yang
kita bahas sebelumnya.
Untuk lebih memahami sifat asynchronous JavaScript, kita akan bahas dengan
callback functions, promises, dan async/await.
Apa itu Callback pada JavaScript?
Callback adalah function yang dilewatkan dalam function lain, dan kemudian
dipanggil dalam function itu untuk melakukan tugas.
Bingung? Oke, mari kita uraikan.
Kode di atas adalah program kecil yang mencatat log ke konsol. Tapi, ada
yang baru di sini. Interpreter akan mengeksekusi instruksi pertama, kemudian
yang kedua, tetapi akan melewati yang ketiga dan mengeksekusi yang terakhir.
setTimeout adalah function javascript yang mengambil dua parameter. Parameter
pertama adalah function yang akan dijalankan, dan yang kedua adalah waktu
untuk menjalankan function tersebut dalam milidetik. Sekarang kalian
melihat bagaimana callback berjalan.
Function di dalam
setTimeout di atas
diperlukan untuk berjalan setelah dua detik (2000 milidetik). Bayangkan itu
digunakan untuk dieksekusi dibeberapa bagian yang terpisah, sementara
instruksi lainnya terus dieksekusi. Setelah dua detik, hasil function
tersebut kemudian dikembalikan.
Itulah sebabnya jika kita menjalankan kode di atas, kita akan mendapatkan
output seperti ini:
Kalian lihat instruksi terakhir dipanggil sebelum function
setTimeout mengembalikan
hasilnya. Katakanlah kita menggunakan metode ini untuk mengambil data dari
database. Sementara user menunggu panggilan database untuk mengembalikan
hasilnya, alur dalam eksekusi ini tidak akan terganggu.
Metode ini sangat efisien, tetapi hanya sampai titik tertentu. Terkadang,
developer harus melakukan
multiple calls ke sumber
yang berbeda dalam kode mereka. Untuk melakukan panggilan ini, callback
akan menjadi berantai hingga menjadi sulit dibaca atau dimantain. Ini
disebut juga sebagai Callback Hell.
Untuk mengatasi masalah ini, dikenalkanlah promises pada JavaScript.
Apa itu Promises pada JavaScript?
Kita pasti pernah mendengar orang membuat janji. Kakakmu yang berjanji akan menjaga adikmu ketika ibumu pergi ke pasar, seorang teman yang berjanji akan melunasi hutangnya tapi pas ditagih malah marahan dia.. eaaa..😂
Tapi janji di JavaScript ini sedikit berbeda.
Sebuah janji dalam konteks kita adalah sesuatu yang membutuhkan waktu untuk
dilakukan. Ada dua kemungkinan hasil dari sebuah janji:
- Menjalankan dan menyelesaikan janji, atau
- Beberapa kesalahan terjadi dan janji ditolak
resolve dan
reject.
Ingatlah ketika resolve berarti sukses, dan reject adalah ketika
terjadi kesalahan.
Mari kita buat contoh promises:
Kode di atas adalah sebuah promises, diapit oleh request ke beberapa
endpoint. Promises itu akan melakukan
resolve dan reject seperti yang kita
bahas di atas.
Setelah melakukan pemanggilan ke endpoint misalnya, jika request berhasil,
kita akan resolve (menyelesaikan) promise tersbut dan melanjutkan untuk
melakukan apa pun yang kita ingikan dengan responsnya. Tetapi jika ada
kesalahan, promise itu akan reject (ditolak).
Promise adalah cara yang rapi untuk mengatasi masalah yang disebabkan oleh
callback hell, dalam metode yang dikenal sebagai promise chaining.
Kalian bisa menggunakan metode ini untuk mendapatkan data secara berurutan
dari beberapa endpoint, tetapi dengan kode yang lebih sedikit dan metode
yang lebih mudah.
Tapi ada cara yang lebih baik lagi! Kalian mungkin akrab dengan metode
berikut ini, karena ini adalah cara yang lebih disukai untuk mengatasi
handling data dan API dalam JavaScript.
Apa itu Async dan Await pada JavaScript?
Masalahnya, merangkai promise bersama seperti callback bisa menjadi sangat
besar dan membingungkan. Itu sebabnya Async dan Await ada.
Untuk membuat async function, kalian lakukan ini:
Perhatikan bahwa memanggil async function akan selalu mengembalikan
promise.
Kita melihat bahwa
asyncFunc mengembalikan promise. Mari kita memecah
beberapa kode sekarang:
Kata kunci
async adalah apa yang akan kita gunakan untuk membuat async
function seperti yang kita bahas di atas. Tapi bagaimana dengan await?
Yah, itu menghentikan JavaScript dari proses fetch (pengambilan) ke
variabel respons hingga promise selesai. Jika promise sudah selesai,
hasil dari fetch method (metode pengambilan) sekarang dapat diassign
ke respons variabel.
Hal yang sama terjadi pada baris ke 3. Metode
.json mengembalikan
promise, dan kita dapat menggunakan await untuk menunda proses sampai
promise selesai.
Kode yang ada di dalam async function bersifat memblokir, tetapi itu
tidak mempengaruhi eksekusi program dengan cara apa pun. Eksekusi kode
kita sama seperti asynchronous biasanya. Untuk menunjukkan ini,
Di konsol browser kita, output di atas akan terlihat seperti ini:
Kalian lihat saat kita memanggil
asyncFunc, kode kita terus
berjalan hingga tiba waktunya bagi function untuk mengembalikan
hasil.
Kesimpulan
Artikel ini tidak membahas konsep-konsep ini secara mendalam,
tetapi saya harap ini menunjukkan kepada kalian bagaimana
JavaScript Asynchronous bekerja dan beberapa hal yang harus
diwaspadai.
Ini adalah salah satu bagian yang penting dari JavaScript, dan
artikel ini hanya membahas sedikit saja dari dasarnya. Semoga
bermanfaat dan kalian semua menikmatinya!
0 comments
Posting Komentar