Async, Await dan Promise di Javascript

Jadi kemarin kemarin gw sempet ikut webminar gitu, dan ternyata kayanya masih banyak yang belum terlalu ngerti sama async dan await.
Oleh karena itu disini gw mau jelasin apa itu Async, Await dan Promise

pertama tama, gw mau jelasin dulu apa itu Synchronus dan Asynchronus.

Synchronus gampangnya berarti program dijalankan secara berurutan, sedangkan Asynchronus tidak

1function Action(){
2    console.log("start")
3    setTimeout(() => console.log("wait 1s!"), 1000)
4    console.log("finish")
5}
6
7Action()
8//result
9//start
10//finish
11//wait 1s!

jika code diatas dijalankan, maka kita bisa melihat finish di print lebih dahulu sebelum wait 1s!
kenapa bisa begitu? karena setTimeout merupakan asynchornus function
sehingga finish terlebih dulu dijalankan karena tidak perlu menunggu wait 1s terprint.

mungkin asynchronus function yang bakal kita sering jumpai adalah function fetching data (seperti menggunakan fetch atau axios). Lalu, apa masalahnya?

1function Action(){
2    console.log("start loading")
3    fetch("https://mmuflih.com")
4    console.log("finish loading")
5}
6
7Action()

anggep aja contoh diatas bakal render loading beneran (kan contoh)
pasti loading ga muncul.. (yang sebenernya muncul, tapi ga keliatan)
karena loading, sudah selesai sebelum datanya selesai diambil

terus gimansdos? ada 2 solusi supaya kita bisa menjalan kan async function secara sync
1. CallBack
2. Promise
3. async await

sebenernya promise dan async-await bukan 2 solusi berbeda sih, karena async await sendiri cuma bisa dilakuin ke promise based functio, tapi cuma kayak beda cara nulis aja

contoh menggunakan CallBack

1function waitOneSecond(callback){
2    setTimeout(() => {
3        console.log("wait 1s!")
4        callback()
5    }, 1000)
6}
7
8function Action(){
9    console.log("start")
10    waitOneSecond(function(){console.log("finish")})
11}
12
13Action()
14//result
15//start
16//wait 1s!
17//finish

Buat yang belum tau, Callback sendiri di js artinya function yang di pass ke function lainya sebagai argument untuk di eksekusi nanti

nah, contoh diatas kita buat nameless function yang isinya log finish, dan kita buat sebagai parameter di async function yang kita buat, setelah itu kita panggil callback tersebut saat fungsi selesai dijalankan.

contoh selanjutnya, menggunakan promise:

1function Action(){
2    console.log("start")
3    new Promise((resolve,reject)=>{
4        setTimeout(() => resolve(console.log("wait 1s!"), 1000))
5    }).then(()=>{
6        console.log("finish")
7    })
8}
9
10Action()
11//result
12//start
13//wait 1s!
14//finish

promise ini punya 3 method, then, catch, dan finally..
then dijalankan ketika code berhasil di resolve, catch ketika ada rejection, sedangkan finally adalah fungsi yang akan dijalankan setelah promise (entah itu resolve atau reject)

Kalo lu liat sebenernya promise ini ujung ujungnya mirip callback juga kan, yang artinya berpotensi menimbulkan callback-hell, buat yang belum tau callback hell itu apa, gw contohin dulu deh..

1function Action(){
2    console.log("start")
3    new Promise((resolve,reject)=>{
4        setTimeout(() => resolve(console.log("wait 1s!"), 1000))
5    }).then(()=>{
6        new Promise((resolve,reject)=>{
7            setTimeout(() => resolve(console.log("wait 1s!"), 1000))
8        }).then(()=>{
9            new Promise((resolve,reject)=>{
10                setTimeout(() => resolve(console.log("wait 1s!"), 1000))
11            }).then(()=>{
12                new Promise((resolve,reject)=>{
13                    setTimeout(() => resolve(console.log("wait 1s!"), 1000))
14                }).then(()=>{
15                    console.log("finish")
16                })
17            })
18        })
19    })
20}
21
22Action()
23//result
24//wait 1s!
25//wait 1s!
26//wait 1s!
27//wait 1s!
28//finish

contoh diatas kita mau nunggu 4 async function dijalanin, jadinya nested gitu.. masih keliatan simple? bayangin kalo 1 function isinya ratusan line code.. mabok dah tuh liatinya..

maka dari itu gw lebih suka pake async await, async await ini cuma bisa dipake di async function dan await promise based function

1async function Action(){ //harus berupa async function
2    console.log("start")
3    await new Promise((resolve,reject)=>{
4        setTimeout(() => resolve(console.log("wait 1s!"), 1000))
5    }) //function yang di await harus berupa promise
6    await new Promise((resolve,reject)=>{
7        setTimeout(() => resolve(console.log("wait 1s!"), 1000))
8    })
9    await new Promise((resolve,reject)=>{
10        setTimeout(() => resolve(console.log("wait 1s!"), 1000))
11    })
12    await new Promise((resolve,reject)=>{
13        setTimeout(() => resolve(console.log("wait 1s!"), 1000))
14    })
15    console.log("finish")
16}
17
18Action()
19//result
20//wait 1s!
21//wait 1s!
22//wait 1s!
23//wait 1s!
24//finish

dengan ini setidaknya code bakal lebih terlihat lebih normal, karena tetap berurutan, bedanya cuma nambah key await aja di sebelum promise function nya

Sekian penjelasan dari saya, terima kasih sudah membaca