
Asynchronous Javascript 4 - Async/Await
Setelah menjelajahi Promise yang cukup memusingkan, kali ini Saya akan membahas sebuah sintaks yang membuat penggunaan Promise menjadi lebih indah, yaitu dengan async
dan await
.
Async
Sintaks async
apabila ditaruh didepan sebuah fungsi, akan menjadikan nilai balik dari fungsi tersebut menjadi sebuah Promise, apapun nilainya.
async function jamBerapa() {
return new Date();
}
const jam = jamBerapa();
console.log(jam); // Promise {<fulfilled>: waktunya}
kode diatas adalah sintaks yang dipermudah dari kode berikut
function jamBerapa() {
return new Promise((resolve) => {
resolve(new Date());
});
}
Await
Sintaks await
dapat digunakan didalam suatu fungsi yang diawali dengan async
. await
memiliki satu tugas yaitu menunggu sampai suatu Promise selesai. Berikut adalah contoh penggunaan await
untuk menunggu Promise selama 2 detik.
Pada awalnya sintaks await
hanya dapat digunakan didalam fungsi berawalan async
. Namun pada standardisasi baru ES2022, terdapat fitur baru yaitu top level await. Fitur tersebut memungkinkan penggunaan sintaks await
diluar fungsi async.
penanganan error async/await
Tanpa metode seperti catch()
, sintaks async/await dapat menggunakan sintaks try/catch/finally
untuk menangani error dan eksekusi callback saat Promise selesai.
Atau, bisa juga dengan menggunakan metode then()
dan .catch()
, karena dengan menggunakan sintaks async
, semua yang dikembalikan akan menjadi Promise.
Ketika menggunakan sintaks async/await pada sintaks blok try/catch, penggunaan await
sebelum Promise tidak boleh ditinggalkan, karena nantinya jika terjadi penolakan, nilai dari penolakan tersebut tidak dapat diterima oleh blok catch.
Hal ini dikarenakan blok try/catch telah ada jauh sebelum Promise muncul, sehingga memang sedari awal tidak didesain untuk menangani Promise. Blok catch memiliki fungsi untuk menangani synchronous error biasa seperti kode berikut:
try {
throw new Error("waduh eror");
} catch (error) {
console.log(error); // Error: waduh error
}
Penggunaan await
sebelum suatu Promise akan menjadikan Promise seakan suatu proses synchronous, dan penolakan akan ditangani secara synchronous.
implementasi async await
Pada artikel Promise, suatu callback hell berhasil disederhanakan menjadi lebih ringkas dan mudah dibaca. Berikut adalah versi Promise menggunakan sintaks async/await.
Quiz
Diakhir seri asynchronous Javascript ini Saya memiliki sebuah tantangan yang menggabungkan beberapa hal yang sudah dipelajari dari awal. Coba tes pemahamanmu dengan menebak output masing-masing skenario berikut.
Selamat, kamu telah berhasil menyelesaikan tutorial tentang asynchronous Javascript! Jangan lupa untuk terus memperdalam pemahamanmu dengan membaca atau menonton tutorial yang lain, semangat!