Belajar JavaScript Dasar #18: Async Await

• Apa Itu Async Await?
• Cara Menggunakan Async Await
• Contoh Menggunakan await
• Error Handling dengan Try...Catch
• Catatan Penting
• Kesimpulan

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