Panduan Komplit

Asynchronous
Programming pada
Javascript

Sastra Panca Nababan

Konsep Asynchronous
Memahami asynchronus adalah salah satu hal penting dalam dunia Javascript. Topik ini
sering dilewatkan ketika masih di tahap belajar fundamental mungkin karena konsepnya
terlalu ribet dijelaskan atau alasan lain. Bahkan banyak yang sudah bertahun-tahun
menggunakan javascript ternyata masih banyak yang masih kurang paham dengan
konsep asynchronous. Walaupun secara praktek mungkin sudah sering digunakan.

Ada banyak sekali implementasi asynchronous dalam javascript seperti event, timer,
request ajax, listener, interaksi user dan masih banyak lagi. NodeJS merupakan
salah satu contoh sukses platform javascript yang sangat bergantung pada teknik
asynchronus.

Topik asynchronous memang termasuk salah satu topik yang tidak terlalu mudah untuk
dipahami, tapi ada istilah “practice makes perfect”. Semakin sering di praktekkan
semakin paham. Tapi praktek tanpa memahami konsep juga buta, terlalu banyak trial
and error dan makan waktu. Menurut saya cara ideal untuk memahami asynchronous
dengan memahami konsepnya adalah secara bertahap dan mempraktekkannya. Ingat
kuncinya adalah bertahap bukan borongan.

Synchronous vs Asynchronous

Dalam dunia programming kedua istilah ini digunakan untuk membedakan tentang cara
urutan eksekusi perintah-perintah yang ada dalam kode anda.

Synchronous adalah yang paling umum dan mudah di mengerti. Setiap perintah di
eksekusi satu persatu sesuai urutan kode yang anda tuliskan. Contoh :

1. console.log('Hello')
2. console.log('Javascript')
3. console.log('Coder')
4.
5. /*
6. Output :
7. Hello!
8. Javascipt
9. Coder
10. */

Output dari kode diatas dijamin akan sesuai urutan, karena setiap perintah harus
menunggu perintah sebelumnya selesai. Proses seperti ini disebut ‘blocking’.
Dalam dunia nyata ini mirip seperti antrian di BANK. Jika anda berada antrian nomor 4,
maka anda akan dilayani setelah antrian 1–3 sampai selesai.

Sedangkan Asynchronous hasil eksekusi atau output tidak selalu berdasarkan urutan
kode, tetapi berdasarkan waktu proses. Eksekusi dengan asynchronous tidak akan
membloking atau menunggu suatu perintah sampai selesai. Daripada
menunggu, asynchronous akan mengeksekusi perintah selanjutnya. Wait, sampai disini
mungkin tidak masuk akal, Contoh :

1. console.log('Hello');
2. setTimeout(() => { console.log('Javascript')},100) // tunda selama 100 miliseconds
3. console.log('Coder');
4.
5. /* ----------
6. Output :
7. Hello!
8. Coder
9. Javascipt
10. ------------*/

Catatan :
Pada baris ke 2 setTimeout digunakan untuk menunda eksekusi dalam satuan
milisecond dalam hal ini untuk simulasi prosess async.

Perhatikan bahwa outputnya tidak berurutan sesuai input (kode). Karena cara kerja
asynchronous adalah berdasarkan waktu proses. Jika ada salah satu eksekusi
membutuhkan proses yang agak lama, maka sembari menunggu prosess tersebut
javascript mengeksekusi perintah selanjutnya.

Mari kita lihat performancenya, Sebagai contoh ada 3 perintah dengan waktu proses
masing-masing.
Dari contoh simulasi diatas model eksekusi asynchronous lebih effisien.

Tapi ada yang menjadi pertimbangan yang disebut race condition. Race
Condition terjadi ketika ada satu perintah yang bergantung pada output eksekusi
asynchronous sebelumnya.Dengan kata lain kejar-kejaran. Contoh :

1. console.log('hello')
2. let user = requestAjax() // di eksekusi secara asynchronous
3. displayUser(user)

Dari contoh kode diatas besar kemungkinan displayUser menampilkan data kosong,
karena belum tentu output dari ekskusi requestAjax sudah selesai.

Solusi untuk problem ini yaitu menggunakan teknik callback, promise, generator atau
asyc/await yang akan kita kupas lebih dalam di sesi berikutnya.
Sampai disini mungkin timbul beberapa pertanyaan.
 Apakah javascript secara default mengeksekusi perintah dengan metode
synchronous atau asynchronous ?

 Bisakah kita membuat proses asynchronous ?

 Dalam kasus apa teknik asynchronous digunakan ?

Jawabannya :

 Javascript secara default mengeksekusi perintah secara synchronous, kecuali untuk

beberapa hal seperti : ajax,websocket, worker, file, database, animasi dan beberapa
hal lainya.

 Kita tidak bisa membuat proses asynchronous murni. Tapi untuk membuat simulasi
iya kita bisa menggunakan fungsi setInternal dan setTimeout

 Teknik Asynchronous paling banyak digunakan mengelola komunikasi yang tidak

mungkin sinkron atau harus menunggu seperti proses request ajax, operasi file,
koneksi ke database, websocket, real time communication seperti pada aplikasi
chating dan masih banyak lagi.

Konsep Callback

Callback sebenarnya adalah function bedanya dengan function pada umumnya adalah di
cara eksekusinya. Jika function pada umumnya di eksekusi berurutan dari atas ke bawah
maka callback di eksekusi pada point tertentu, itu sebabnya di sebut callback.

Callback disebut juga dengan high-order function. Callback sebenarnya adalah function,
bedanya dengan function pada umumnya adalah di cara eksekusinya. Jika function pada
umumnya di eksekusi secara langsung sedangkan callback di eksekusi dalam function
lain melalui parameter.

1. function main(param1,param2,callBack){
2. console.log(param1, param2)
3. callBack()
4. }
5.
6. function myCallback(){
7. console.log ('hello callback')
8. }
9.
10. main(1,2,myCallback)
11.
 12. /* ===================
13. Output :
14. 1 2
15. hello callback
16. */

Kenapa function bisa di jadikan sebagai parameter ?

Function dalam javascript adalah object atau sering disebut first-class object, yang
artinya :

 Function bisa di jadikan parameter

 Function dapat disimpan ke dalam variabel

 Seperti object pada umumnya, function bisa memiliki property dan method

 Function dapat mengembalikan value dalam bentuk function

Kapan Callback digunakan ?

Callback dapat digunakan untuk proses synchronous maupun asynchronous. Beberapa
contoh implementasi callback adalah :

 Injeksi atau modifikasi hasil eksekusi sebuah function

 Event listener

 Menangani proses asynchronous

Callback Pada Synchronous

1. Callback sebagai Injeksi sebuah function

1. function calculate(x,y){
2. result = x + y
3. return result
4. }
5. calculate(3,2) // 5
Kode diatas cukup sederhana yaitu untuk melakukan operasi penjumlahan. Berikut
tantangannya :

 Buatlah function diatas agar bisa melakukan operasi matematika yg lain seperti
kurang, bagi, kali dan lain sebagainya.

 Output dari function di atas harus bisa di format ke dalam mata uang

Dengan cara umum kita bisa menyelesaikanya dengan bantuan if atau switch untuk
menguji operatornya. Tapi ini akan membuat code lebih panjang dan kurang dinamis.
Dengan callback kita dapat membuat function diatas menjadi lebih dinamis

1. function calculate(param1,param2,callback){
2. //default operation
3. result = param1 + param2
4.
5. // callback is function ?
6. if (typeof callback == 'function'){
7. result= callback(param1,param2)
8. }
9.
10. return result
11. }
12.
13. //execute
14. a=calculate(2000,4000, function(x,y){return "$ " + (x + y) })
15. b=calculate(7000,2000, function(x,y){return "Rp " + (x * y) })
16. console.log(a) // $ 6000
17. console.log(b) // $ 14000

2. Callback sebagai Event Listener

Event Listener adalah function yang di eksekusi karena suatu event contoh ketika
berinteraksi dengan DOM seperti event click, focus, keydown,keypress dan lain
sebagainya.

Contoh pada Native Javascript

1. document.getElementById("my_button").addEventListener("click",function(){
2. alert('Ouhh aku di klik!')
3. })

Untuk method lebih lengkap anda dapat melihatnya disini

Jika anda pengguna jquery, pasti sudah terbiasa dengan event listener seperti ini :
 1. $('#my_button').on('click', function(e) {
2. console.log('Ouhh aku di klik!');
3. })

Callback Pada Asynchronous

Proses asynchronous identik dengan delay, dimana hasil dari proses tersebut
membutuhkan selang waktu tertentu untuk menghasilkan output. Kita akan menemukan
proses asynchronous pada proses Ajax, komunikasi HTTP, Operasi file, timer, dsb.

Pada synchronous output di prosess berdasarkan urutan kode.

1. function p1() {
2. console.log('p1 done')
3. }
4. function p2() {
5. console.log('p2 done')
6. }
7. function p3() {
8. console.log('p3 done')
9. }
10. p1()
11. p2()
12. p3()
13.
14. /* Output :
15. p1 done
16. p2 done
17. p3 done
18. */

Tetapi pada proses asynchronous output dari kode yang tuliskan tidak selalu berurutan.
Hasilnya tergantung yang mana yang lebih dulu selesai. Perhatikan contoh berikut :

1. function p1() {
2. console.log('p1 done')
3. }
4. function p2() {
5. //setTimeout or delay for asynchronous simulation
6. setTimeout(
7. function() {
8. console.log('p2 done')
9. },100
10. )
11. }
12. function p3() {
13. console.log('p3 done')
14. }
15. p1()
16. p2()
17. p3()
18.
19. /* Output :
20. p1 done
 21. p3 done
22. p2 done
23. */

Catatan : setTimeout digunakan untuk simulasi asynchronous. Karena sebenarnya kita

tidak bisa membuat proses asynchronous murni.

Perhatikan output dari kode diatas tidak lagi berurutan. Kerena javascript mengerjakan
mana yang lebih dulu selesai. Mungkin pada contoh diatas tidak terlalu masalah tapi
pada kasus tertentu ini menjadi problem, Contohnya kita ingin menampilkan data yang
harus di request terlebih dahulu dengan proses ajax.

1. data=requestAjax() // asynchronous process

2. showResult(data) //undefined

Kemungkinan besar hasilnya undefined. Karena belum tentu data sudah tersedia ketika
function showResult( ) di eksekusi. Teknik callback dapat kita gunakan untuk problem
ini.

Baik sebelum membahas ajax lebih , kita akan coba memperbaiki challange asynchronus
di atas dengan memastikan output p1,p2,p3 sesuai urutan.

Solusi :

Solusinya adalah dengan membuat p3 menjadi callback bagi p2.

1. function p1() {
2. console.log('p1 done')
3. }
4.
5. function p2(callback) {
6. setTimeout(
7. function() {
8. console.log('p2 done')
9. callback()
10. },100
11. )
12. }
13.
14. function p3() {
15. console.log('p3 done')
16. }
17. p1()
18. p2(p3)
 1. Callback pada proses ajax

Callback pada asynchronous seperti delegasi tugas. Seperti pada contoh sebelumnya
maka untuk mengelola komunikasi dengan ajax kita memerlukan callback

Problem :
1. data=requestAjax() // asynchronous process
2. showResult(data) //undefined

Solusi:

Solusinya adalah dengan membuat function showResult menjadi callback bagi function
requestAjax

1. data=requestAjax(showResult) // showResult menjadi callback

Berikut code lengkapnya :

1. function requestAjax(callback){
2.
3. // inisialisasi library XML Http Request
4. var xhr = new XMLHttpRequest();
5.
6. // set target request
7. xhr.open('GET','https://jsonplaceholder.typicode.com/users/1')
8.
9. // terapkan callback
10. xhr.onload = function(){
11. if(xhr.status === 200){
12. callback(xhr.responseText)
13. }else{
14. callback('Failed')
15. }
16. }
17.
18. // mulai request
19. xhr.send()
20.
21. }
22.
23. function showResult(data){
24. if (data != 'Failed'){
25. //tampilkan Data
26. data=JSON.parse(data)
27. console.log(data)
28. }
29. }
30.
31. requestAjax(showResult)
 2. Operasi file

Operasi file seperti read,write,rename dan delete file sangat umum dalam NodeJS.
Operasi file pada nodejs mendukung synchronous dan asynchronous.

Contoh membaca file secara synchronous

1. const fs = require('fs');
2. var data = fs.readFileSync('hello.md')
3. console.log('Read File Done :' + data.toString());

Hasil eksekusi code diatas akan membloking keseluruhan prosess hingga proses baca file
selesai. Kelemahannya tentu aplikasi akan berhenti sampai proses tersebut selesai
ditambah lagi tidak ada manajemen error.

Cara yang paling umum utuk operasi file adalah menggunakan metode asynchonous

Contoh membaca file secara Asynchronous

1. function readFileCallback(err,data){
2. if (err){
3. console.log('Error Read File :' + err);
4. }else{
5. console.log(data.toString())
6. }
7. }
8. var data = fs.readFile('hello.md',readFileCallback)

Callback Hell
Callback hell adalah istilah ketika membuat beberapa callback bercabang atau callback di
dalam callback. Sebagai contoh menggabung beberapa file ke dalam satu file.

1. var a = readFileContent("a.md");
2. var b = readFileContent("b.md");
3. var c = readFileContent("c.md");
4. writeFileContent("result.md", a + b + c);
5. console.log("we are done");

karena readFileContent( ) adalah proses asynchronous maka di kelola dengan callback

seperti berikut :

1. readFileContent("a.md", function (a){

2. readFileContent("b.md", function (b){
3. readFileContent("b.md", function (b){
 4. writeFileContent("result.md", a + b + c, function(){
5. console.log("we are done");
6. })
7. })
8. })
9. })

Apa problem kode diatas ?

Sebenarnya dari segi output tidak ada problem, yang menjadi problem adalah

1. Code sulit dibaca, dalam kasus tertentu piramida code bisa menjadi lebih panjang
dan sulit untuk di maintenence

2. Tidak ada error handling, jika salah satu proses readFile error sulit di debug bagian
yang mana yang error.

Bagaimana Solusinya ?
Solusi pertama adalah dengan membuat kode yang lebih modular agar lebih mudah
dibaca. Tapi solusi yang lebih mudah adalah menggunakan promise yang akan di bahas
berikutnya.

1. Apa sih itu promise ?

Promise adalah salah fitur terbaru dari ES6. Jika anda sebelumnya sudah pernah
menggunakan .then maka anda sudah menggunakan promise. Mari kita mulai dari
analogi sederhana. Anda janjian ketemuan dengan salah satu kolega anda, tiba-tiba
kolega tersebut bertanya anda sudah dimana ? Ada beberapa kemungkinan jawaban
disini : dalam perjalanan, sudah sampai atau janjinya di batalkan.

Dalam dunia promise analogi di atas juga sama, ketika melakukan request asynchronous
seperti Ajax, maka ada 3 kemungkinan state :

 Pending ( sedang dalam proses )

 Fulfilled ( berhasil )

 Rejected ( gagal )
Lalu bagaimana implementasinya dalam javascript ? Untuk sekarang ingat saja bahwa
promise itu adalah object. Object yang merepresentasikan state diatas.

2.Callback vs Promise
Promise umumnya digunakan sebagai alternative callback. Salah satu tantangan
di callback adalah callback hell. Disebut neraka ketika ada callback didalam callback
didalam callback lagi dan di dalam callback lagi. Problemnya adalah kode sulit dibaca
dan penanganan error nya juga menjadi sulit. Disaat seperti ini maka promise menjadi
solusi.

Sebelum mendalami promise sebaiknya pahamilah terlebih dahulu konsep callback.

Promise bukan untuk menggantikan callback, karena promise akan selalu berjalan
asynchronous sedangkan callback bisa digunakan untuk synchronous maupun
asynchronous. Benefit utama dari promise adalah membuat code lebih readable dan
manajemen error yang lebih baik.

Beberapa hal penting perbedaan callback dan promise adalah :

 Callback adalah function sedangkan promise adalah object.

 Callback di kirim melalui parameter, sedangkan promise mengembalikan object

 Callback digunakan untuk menghandle succes dan failure,sedangkan promise tidak

 Callback dapat digunakan untuk beberapa event sekaligus, sedangkan promise

hanya untuk satu event

3.Membuat & Menggunakan Promise

Masih ingat dengan 3 state yang kita bahas sebelumnya ? Pending, Fulfilled, Reject.
Untuk membuat promise cukup dengan memanggil constructor nya :

1. let janjian = new promise()

2. console.log(janjian)

Sampai disini output dari code atas adalah Promise { <pending> }

Lalu bagaimana untuk mengatur state Fullfilled dan Reject ?
Untuk state ini gunakan salah satu listener, resolve() atau reject()

1. var janjian = new promise(

2. (resolve, reject) => {
3. // salah satu dari 2 callback berikut
4. // resolve('berhasil')
5. // reject(new error('janji dibatalkan'))
6. }
7. )

Untuk menggunakan promise diatas gunakan method then dan catch

1. janjian
2. .then((result) => { console.log(result) })
3. .then((error) => { console.log(error) })

Output dari code diatas ada 2 kemungkinan,

 Jika comment pada resolve( ) di hapus maka hasilnya “berhasil”

 Jika comment pada reject( ) di hapus maka hasilnya “Janji di batalkan”

 4. Request Ajax dengan Fetch
fetch adalah API yang di perkenalkan sejak ES6, untuk melakukan request ajax. Berikut
boilerplate untuk penggunaan fetch.

1. fetch(url, options).then(function (response) {

2. // handle HTTP response
3. }, function (error) {
4. // handle network error
5. })

Mari kita coba request ke API public.

1. fetch('https://jsonplaceholder.typicode.com/users/1')
2. .then(function (response) { // #1
3. return response.json()
4. })
5. .then(function (user) { // #2
6. console.log(user)
7. })

Ouput dari code diatas json data user.

Tapi kenapa method .then di panggil 2 kali ?

Hal ini sering membuat bingung, apalagi bagi yang pertama kali mencoba fetch.
1. Response fetch pada #1 hasilnya adalah object Response, untuk lebih detailnya adan
bisa lihat disini. Untuk mendapat response dalam bentuk json() maka digunakan
method Body.json()

2. Hasil dari method Body.json() dibaca pada #2. Selain json kita juga menerima
respon dalam format plain text menggunakan method Body.text()

5. Promise Chaining
Seperti namanya promise chaining berarti promise berantai. Berikut contoh kasus untuk
menampilkan post dengan alur seperti berikut :

1. request post

2. request author berdasarkan Id post

3. request comment berdasarkan Id post

4. tampilkan hasil

dalam bentuk pseude-code kira-kira seperti ini :

1. getPost
2. .then(getAuthor)
3. .then(getComment)
4. .then(showResult)
Berikut source code lengkapnya :

Wow Kode diatas terlihat sexy bukan ?

Jika dirasa kode diatas sulit dibaca, mari kita per simple lagi dengan cara seperti berikut:

6.Promise.all
Promise.all sedikit lebih mudah, Cara kerjanya adalah menunggu hingga semua eksekusi
promise selesai dan menghasil output dalam bentuk array. Sebagai contoh untuk kasus
diatas menggunakan dengan Promise.all

7.Promise in Looping
Salah satu kasus menarik di promise adalah mengeksekusi beberapa promise dalam
looping sesuai urutan. Untuk memproses promise dalam looping, gunakan array.map
dan Promise.all
 8. Promise.race
Berbeda cara eksekusi promise sebelumnya. Promice.race hanya menghasilkan promise
yang lebih dulu selesai. Sebagai contoh kasus mari kita ambil contoh olahraga
kegemaran kita semua yaitu balap karung.

Output : Balapan selesai,Pemenangnya adalah: Peserta 2.

Tapi bagaimana kalau satu peserta terjatuh ? ( ada promise yang reject )

Output : Balapan dihentikan karena : Peserta 2

Seharusnya jika peserta 2 terjatuh maka pemenang adalah peserta 1, tapi karena jiwa
mereka ini sangat nasionalis terpaksa balapan dihentikan.

Tapi karena kebetulan ini adalah pertandingan piala dunia balap karung, peraturan
balapnya di ubah. Pertandingan tetap dilanjutkan meskipun ada peserta yang terjatuh.

Untuk ini method promise di extend untuk mendeteksi promise yang reject.
Output :
Peserta 2 terjatuh,ahh sudahlah lanjutkan saja
Balapan selesai,Pemenangnya adalah: Peserta 1

9. Library Promise

Semua fungsi promise yang di gunakan disini menggunakan standar ES6, jika anda ingin
mengeksplor lebih dalam lagi tentang promise atau fitur promise standar belum cukup,
anda bisa mencoba library-library promises yang menawarkan fitur yang lebih banyak
seperti Bluebird,Q, RSVP,Catiline dan masih banyak lagi.

1. Apa sih itu async/await ?

Async/await adalah fitur yang hadir sejak ES2017. Fitur ini mempermudah kita dalam
menangani proses asynchronous. Untuk memahami async/await sebaiknya anda harus
memahami promise terlebih dahulu.
Ada 2 kata kunci disini yaitu async dan await, mari kita lihat contohnya :

1. async function hello() {

2. result = await doAsync()
3. console.log(result)
4. }

Keterangan :
async → mengubah function menjadi asynchronous
await → menunda eksekusi hingga proses asynchronous selesai, dari kode di atas
berarti console.log(result) tidak akan di eksekusi sebelum prose doAsync(
) selesai. await juga bisa digunakan berkali-kali di dalam function

Sekarang mari kita coba untuk fetch dengan promise dan async/await

Output nya sama tapi async/await lebih mudah dibaca. Lalu bagaimana dengan
manajemen error nya ?

2. Async/await Error Handling

Error handling pada async/await menggunakan try…catch

 3. Async/await Pattern
Ada beberapa pattern untuk membuat async/await :

1. // 1. Anonymous Async Function

2. let main = (async function() {
3. let value = await doAsync()
4. })()
5.
6. // 2. Async Function Declaration
7. let main = async function() {
8. let value = await doAsync()
9. }
10.
11. // 3. Async Function Assignment
12. let main = async () => {
13. let value = await doAsync()
14. }
15.
16. // 4. Async Function as Argument
17. document.body.addEventListener('click', async function() {
18. let value = await doAsync()
19. })
20.
21. // 5. Object and Class Methods
22. let obj = {
23. async method() {
24. let value = await doAsync()
25. }
26. }
27.
28. class MyClass {
29. async myMethod(){
30. let value = await doAsync()
31. }
32. }
 4. Serial & Paralel
Pada saat mengeksekusi beberapa proses asynchronous, ada kalanya kita harus memilih
eksekusi secara serial atau parallel. Serial biasanya digunakan jika kita ingin
mengeksekusi proses asynchronous secara berurutan. Sedangkan paralel jika ingin di
eksekusi secara bersamaan, dalam hal ini urutan tidak menjadi prioritas tapi hasil dan
performa.
 5. Promise.all & Promise.race dalam Async/await
Salah satu favorite saya di promise adalah promise.all dan promise.race. Karena
async/await di desain untuk bekerja dengan promise, maka dengan mudah bisa kita
gunakan pada async/await, contohnya :