Async dan Await di JavaScript: Menyederhanakan Asynchronous

Setelah mempelajari callback dan Promise, kamu mungkin merasa kode asynchronous sudah jauh lebih rapi. Tapi JavaScript masih punya senjata terakhir yang membuatnya semakin mudah dibaca dan ditulis: async dan await.

Dengan async dan await, kamu bisa menulis kode asynchronous seperti kode synchronous, tanpa .then() berlapis dan callback yang bersarang.

🔍 Apa Itu async dan await?

• async adalah keyword untuk mendefinisikan fungsi asynchronous.
• await digunakan untuk menunggu Promise diselesaikan sebelum melanjutkan eksekusi ke baris berikutnya.

Dengan kombinasi ini, kamu bisa membuat logika asynchronous yang tampak seperti urutan biasa.

📌 Contoh Dasar Penggunaan

1function getData() {
2  return new Promise((resolve) => {
3    setTimeout(() => {
4      resolve("Data berhasil diambil");
5    }, 2000);
6  });
7}
8
9async function showData() {
10  console.log("Mengambil data...");
11  const hasil = await getData();
12  console.log(hasil);
13}
14
15showData();
16

1function getData() {
2  return new Promise((resolve) => {
3    setTimeout(() => {
4      resolve("Data berhasil diambil");
5    }, 2000);
6  });
7}
8
9async function showData() {
10  console.log("Mengambil data...");
11  const hasil = await getData();
12  console.log(hasil);
13}
14
15showData();
16

📝 Output:

1Mengambil data...
2(Data muncul setelah 2 detik)
3Data berhasil diambil
4

1Mengambil data...
2(Data muncul setelah 2 detik)
3Data berhasil diambil
4

📘 Penjelasan:

• Fungsi getData mengembalikan Promise.
• Fungsi showData adalah async function.
• await membuat JavaScript menunggu hingga Promise selesai sebelum lanjut.

⚠️ Penanganan Error dengan Try-Catch

Saat kamu menggunakan await, kamu bisa menangani error dengan cara yang sama seperti kode synchronous — menggunakan try...catch.

1async function loadUser() {
2  try {
3    const response = await fetch("https://api.example.com/user");
4    const data = await response.json();
5    console.log(data);
6  } catch (error) {
7    console.error("Terjadi kesalahan:", error.message);
8  }
9}
10

1async function loadUser() {
2  try {
3    const response = await fetch("https://api.example.com/user");
4    const data = await response.json();
5    console.log(data);
6  } catch (error) {
7    console.error("Terjadi kesalahan:", error.message);
8  }
9}
10

💡 Perlu Diingat

• Hanya bisa menggunakan await di dalam fungsi yang diberi async.
• Fungsi async selalu mengembalikan Promise, bahkan jika kamu tidak eksplisit menuliskannya.
• await hanya akan menunggu objek yang merupakan Promise. Jika bukan Promise, ia akan langsung mengembalikan nilainya.

⚖️ Perbandingan: Promise vs Async/Await

| Promise Chaining | Async/Await | | ----------------------------------- | --------------------------------------- | | .then().catch() | await + try/catch | | Lebih kompleks jika banyak chaining | Lebih mudah dibaca seperti kode biasa | | Cocok untuk callback fungsi kecil | Cocok untuk proses panjang dan kompleks |

✨ Kesimpulan

async dan await adalah fitur modern JavaScript yang menyederhanakan cara kamu menulis kode asynchronous. Ia memungkinkanmu menulis kode yang lebih bersih, mudah dibaca, dan mirip dengan kode synchronous, tanpa kehilangan kekuatan asynchronous itu sendiri.

Dengan memahami callback, Promise, dan async/await, kamu telah menguasai dasar penting dari asynchronous JavaScript. Di tahap berikutnya, kamu bisa mulai belajar konsep JavaScript modern (ES6+) seperti destructuring, spread operator, dan template literal.