Promises dan Async/Await pada JavaScript

Dalam pengembangan aplikasi JavaScript modern, terutama yang berhubungan dengan pemrosesan data secara asynchronous (tidak serentak), sangat penting untuk memahami konsep Promises dan Async/Await. Keduanya merupakan fitur yang digunakan untuk menangani operasi asynchronous seperti permintaan HTTP, pembacaan berkas, atau pemrosesan waktu tunda (delay).

Artikel ini akan membahas pengertian, contoh penggunaan, serta perbandingan antara Promises dan Async/Await.

---

Apa Itu Asynchronous?

Secara sederhana, asynchronous berarti bahwa kode tidak dieksekusi secara berurutan, melainkan memungkinkan program untuk melanjutkan proses lain tanpa harus menunggu proses sebelumnya selesai.

Contoh umum dari operasi asynchronous adalah:

• Mengambil data dari server (API request)
• Mengatur waktu tunda menggunakan setTimeout
• Membaca file dari sistem

---

Promises

Pengertian

Promise adalah objek di JavaScript yang merepresentasikan keberhasilan atau kegagalan dari suatu operasi asynchronous di masa depan.

Promise memiliki tiga status:

1. Pending – Janji sedang dalam proses.
2. Fulfilled – Janji berhasil ditepati.
3. Rejected – Janji gagal ditepati.

Sintaks Dasar

const janji = new Promise((resolve, reject) => {
  // Operasi asynchronous
  const sukses = true;
  if (sukses) {
    resolve("Operasi berhasil");
  } else {
    reject("Operasi gagal");
  }
});

janji
  .then((hasil) => console.log(hasil))
  .catch((error) => console.error(error));

Contoh Penggunaan pada Fetch API

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("Terjadi kesalahan:", error));

---

Async/Await

Pengertian

Async/Await merupakan fitur terbaru dalam JavaScript (diperkenalkan pada ECMAScript 2017) yang menyederhanakan cara penulisan kode asynchronous berbasis Promise. Dengan menggunakan async dan await, kode asynchronous menjadi lebih mudah dibaca dan ditulis seperti kode synchronous (berurutan).

Sintaks Dasar

async function ambilData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Terjadi kesalahan:", error);
  }
}

ambilData();

Catatan: await hanya bisa digunakan di dalam fungsi yang ditandai dengan async.

---

Perbandingan Promise vs Async/Await

Aspek	Promise	Async/Await
Gaya Penulisan	Berbasis .then() dan .catch()	Berbasis try / catch
Tingkat Keterbacaan	Sedang	Tinggi (lebih mirip kode sinkron)
Penanganan Error	Menggunakan .catch()	Menggunakan try / catch
Kompatibilitas	Lebih lama tersedia	Perlu browser modern (ES2017 ke atas)

---

Kesimpulan

Baik Promise maupun Async/Await merupakan cara efektif dalam menangani proses asynchronous pada JavaScript. Promise memberi kontrol yang fleksibel dalam chaining (rangkaian proses), sedangkan Async/Await menawarkan gaya penulisan yang lebih bersih dan mudah dipahami, terutama untuk operasi yang kompleks.

Dalam praktiknya, keduanya sering digunakan bersamaan karena Async/Await dibangun di atas Promise. Oleh karena itu, memahami dasar Promise tetap penting meskipun Anda menggunakan Async/Await dalam proyek Anda.

---