Halo teman-teman semuanya, pada artikel kali ini kita akan belajar tentang Async Await di JavaScript, yaitu sebuah cara yang lebih sederhana dan mirip gaya synchronous untuk menulis kode asynchronous yang menggunakan Promise.
Apa Itu Async Await?
Async Await adalah fitur dari ES8 (ECMAScript 2017) yang membuat kita bisa bekerja dengan Promise menggunakan sintaks yang lebih mudah dibaca.
Dengan async
dan await
, kita tidak perlu lagi membuat banyak then()
yang bersarang, alur kodenya jadi terasa lebih "linear", seperti menulis kode biasa.
Cara Menggunakan Async Await
async
digunakan untuk mendefinisikan function asynchronous.
await
digunakan untuk "menunggu" Promise selesai sebelum melanjutkan eksekusi.
Contoh sederhana:
async function hello() {
return "Halo Dunia!";
}
hello().then((hasil) => console.log(hasil));
// Output: Halo Dunia!
Karena function hello
bertipe async
, maka otomatis dia mengembalikan Promise.
Contoh Menggunakan await
await
digunakan di dalam function async
untuk menunggu hasil Promise:
function delay(ms) {
return new Promise((resolve) => {
setTimeout(() => {
resolve("Selesai setelah delay!");
}, ms);
});
}
async function proses() {
console.log("Mulai...");
let hasil = await delay(2000); // Menunggu 2 detik
console.log(hasil);
console.log("Selesai!");
}
proses();
Output:
Mulai...
(Selamat 2 detik...)
Selesai setelah delay!
Selesai!
Terlihat lebih bersih dan mudah diikuti dibandingkan menggunakan .then()
berantai.
Error Handling dengan Try...Catch
Saat menggunakan await
, kita bisa menangani error dengan try...catch
supaya lebih rapi:
function login(user) {
return new Promise((resolve, reject) => {
if (user === "admin") {
resolve("Login berhasil!");
} else {
reject("Login gagal!");
}
});
}
async function prosesLogin() {
try {
let hasil = await login("admin");
console.log(hasil);
} catch (error) {
console.log(error);
}
}
prosesLogin();
Jika Promise reject
, maka akan langsung masuk ke blok catch
.
Catatan Penting
await
hanya bisa digunakan di dalam function yang dideklarasikan dengan async
.
- Jika perlu menjalankan beberapa Promise secara paralel, lebih baik gunakan
Promise.all()
.
Contoh:
async function ambilData() {
let [data1, data2] = await Promise.all([
fetch('https://api.example.com/data1'),
fetch('https://api.example.com/data2')
]);
console.log(await data1.json());
console.log(await data2.json());
}
Dengan Promise.all()
, semua request dijalankan bersamaan sehingga lebih cepat.
Kesimpulan
Async Await adalah cara modern dan lebih nyaman untuk bekerja dengan Promise di JavaScript. Dengan async
dan await
, kita bisa membuat kode asynchronous terlihat seperti synchronous, sehingga lebih mudah dibaca dan dikelola.
Jangan lupa selalu gunakan try...catch
untuk menangani error saat menggunakan await
, dan gunakan Promise.all()
jika perlu menjalankan beberapa Promise sekaligus.
Terima Kasih