async dan await adalah cara lain menulis kode yang menunggu Promise, misalnya menunggu jawaban server. Hasilnya sama dengan rantai .then, tapi kodenya dibaca dari atas ke bawah kayak kode biasa.
🧪 Tebakan cepat: fungsi yang sedang berhenti di
awaititu menahan seluruh program, atau cuma dirinya sendiri? Tebak dulu, jawabannya ada di bagian "Menunggu denganawait".
Menunggu dengan await
function getStudent(id) {
return new Promise((resolve) => {
setTimeout(() => resolve({ id: id, name: 'Budi' }), 800)
})
}
async function showStudent() {
console.log('1. minta data siswa')
const student = await getStudent(1)
console.log('3. dapat:', student.name)
}
showStudent()
console.log('2. baris setelah showStudent()')
Yang tercetak, berurutan:
1. minta data siswa
2. baris setelah showStudent()
3. dapat: Budi
showStudent() mencetak baris 1, lalu berhenti di await sambil menunggu "server" 800 ms. Selama dia berhenti, program lanjut dan baris 2 tercetak. Begitu Promise-nya selesai, showStudent lanjut dari tempat dia berhenti dan mencetak baris 3. Jadi jawaban tebakan: await cuma menjeda fungsinya sendiri.
getStudent(1)mengembalikan Promise yang selesai 800 ms kemudian, kayakfetch.asyncdi depanfunctionmenandai fungsi yang boleh memakaiawait.await getStudent(1)menunggu Promise-nya selesai, lalu memberi nilainya.studentberisi object{ id: 1, name: 'Budi' }, bukan Promise.awaitcuma boleh ditulis di dalam fungsiasync.function getData() { const data = await fetch(url) }tanpaasyncbikin error.
Fungsi async selalu mengembalikan Promise
function tunda(ms) {
return new Promise((resolve) => setTimeout(resolve, ms))
}
async function sapa() {
await tunda(500)
return 'Halo!'
}
sapa().then((teks) => console.log(teks)) // Halo! (setengah detik kemudian)
tunda(ms)bikin Promise yang selesai sesudahmsmilidetik:setTimeoutmemanggilresolvewaktu jedanya habis.await tunda(500)menjedasapasetengah detik. Tanpaawait,tunda(500)cuma dipanggil tanpa ditunggu, dan'Halo!'langsung dikembalikan.- Apa pun yang di-
returnfungsiasyncdibungkus jadi Promise.async function f() { return 5 }memberi Promise berisi5, bukan angka5. Ambil nilainya pakai.then, atau pakaiawaitdi fungsiasynclain.
Beberapa await berurutan
async function ambilNama() { return 'Budi' }
async function ambilKota() { return 'Bandung' }
async function kenalan() {
const nama = await ambilNama()
const kota = await ambilKota()
return nama + ' dari ' + kota
}
kenalan().then((teks) => console.log(teks)) // Budi dari Bandung
Tiap await menunggu satu Promise dan memberi hasilnya, baru fungsinya lanjut ke baris berikut. Gabungkan hasilnya, bukan Promise-nya: tanpa await, ambilNama() + ' dari ' + ambilKota() menghasilkan [object Promise] dari [object Promise].
Kalau Promise yang di-await gagal, await melempar error-nya. Jadi kegagalan ditangkap pakai try...catch biasa:
async function showStudent() {
try {
const student = await getStudent(1)
console.log('dapat:', student.name)
} catch (error) {
console.log('gagal:', error.message)
}
}
⚠️ Jebakan yang sering ketemu
- Lupa
await.const data = fetch(url)isinya Promise, dandata.namejadiundefined. awaitdi dalamforEach.forEachgak menunggu fungsiasyncdi dalamnya. Kalau mau satu per satu, pakaifor...of.- Gak ada
try...catch. Promise yang gagal tanpa ditangkap muncul sebagai "Uncaught (in promise)", dan sisa fungsinya gak jalan.
TL;DR: async menandai fungsi yang boleh memakai await, dan fungsi itu selalu mengembalikan Promise. await menunggu Promise lalu memberi nilainya, tapi cuma menjeda fungsinya sendiri: kode di luar fungsi itu jalan terus. Beberapa await berurutan menunggu satu per satu, dan yang digabung adalah hasilnya. Kegagalan ditangkap dengan try...catch.
