Belajar JavaScript - Penjelasan Async/Await, Callbacks dan Promises pada JavaScript

Arizal
00.33
0
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:
  1. Menjalankan dan menyelesaikan janji, atau
  2. Beberapa kesalahan terjadi dan janji ditolak
Promises datang untuk memecahkan masalah dari callback function. Promises mengambil dua function sebagai parameter. Yaitu, 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