Memahami Async / Await dan Promise di JavaScript

Dalam tutorial kali ini kita akan membahas Async / Await dan Promise di JavaScript. Sebagaimana diketahui bahwa JavaScript adalah bahasa single-threaded, artinya ia mengeksekusi satu perintah dalam satu waktu. Namun dalam aplikasi modern, kita sering membutuhkan proses asinkron, seperti:

• Memuat data dari API,

• Menunggu respon server,

• Menjalankan animasi,

• atau menunda eksekusi fungsi tertentu.

Untuk itulah JavaScript menyediakan Promise dan Async/Await, agar kita bisa menjalankan kode tanpa menghentikan proses utama.

Apa Itu Promise?

Promise adalah objek yang mewakili hasil dari operasi yang berjalan di masa depan, entah berhasil (fulfilled) atau gagal (rejected).

Contoh Promise sederhana:

const getData = new Promise((resolve, reject) => {
  const success = true;
  setTimeout(() => {
    if (success) {
      resolve("Data berhasil diambil!");
    } else {
      reject("Gagal mengambil data!");
    }
  }, 2000);
});

getData
  .then((res) => console.log(res))
  .catch((err) => console.error(err));

Penjelasan:

• resolve() → digunakan saat operasi berhasil.

• reject() → digunakan jika terjadi error.

• .then() menangani hasil sukses.

• .catch() menangani error.

Menggunakan Async / Await

Async/Await adalah cara yang lebih sederhana dan mudah dibaca untuk menangani Promise.
Kata kunci await hanya bisa digunakan di dalam fungsi yang dideklarasikan dengan async.

Contoh penggunaan:

async function loadData() {
  try {
    const response = await getData;
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

loadData();

Dengan await, JavaScript menunggu hingga Promise selesai tanpa menghentikan eksekusi kode lain di luar fungsi.

Studi Kasus: Loading Data dari API dengan Spinner

Kita akan membuat contoh kecil untuk memuat data API dan menampilkan spinner selama proses berlangsung.

Struktur HTML:

<h2> Contoh Async / Await + Spinner</h2>
<button id="loadBtn">Muat Data</button>
<div id="spinner" style="display:none;">⏳ Memuat...</div>
<div id="result"></div>

<script src="app.js"></script>

CSS (opsional):

<style>
#spinner {
  margin-top: 10px;
  color: #007bff;
  font-weight: bold;
}
#result {
  margin-top: 15px;
  font-family: Arial, sans-serif;
}
</style>

JavaScript: Mengambil Data API dengan Async/Await

const loadBtn = document.getElementById("loadBtn");
const spinner = document.getElementById("spinner");
const result = document.getElementById("result");

loadBtn.addEventListener("click", async () => {
  spinner.style.display = "block";
  result.innerHTML = "";

  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts?_limit=5");
    const data = await response.json();

    spinner.style.display = "none";

    data.forEach((item) => {
      result.innerHTML += `<p><strong>${item.title}</strong><br>${item.body}</p>`;
    });
  } catch (error) {
    spinner.style.display = "none";
    result.innerHTML = `<p style="color:red;">Terjadi kesalahan saat memuat data!</p>`;
  }
});

Penjelasan langkah-langkah:

1. Saat tombol diklik → spinner muncul.

2. fetch() memuat data dari API.

3. Setelah Promise selesai → spinner disembunyikan, hasil tampil.

4. Jika error → pesan ditampilkan di layar.

Promise vs Async/Await

Aspek	Promise	Async/Await
Penulisan	Menggunakan .then() dan .catch()	Lebih ringkas dengan try...catch
Keterbacaan	Kurang mudah dibaca jika banyak chaining	Lebih mirip kode sinkron
Error Handling	Dengan .catch()	Dengan try...catch
Digunakan untuk	Semua proses asinkron	Alternatif modern Promise

Tips Tambahan

✅ Gunakan await hanya di dalam fungsi async.
✅ Bungkus pemanggilan API dengan try...catch agar aman dari error.
✅ Tambahkan spinner atau loader untuk meningkatkan UX saat proses loading.
✅ Bisa digabung dengan setTimeout() untuk simulasi delay.

Kesimpulan

Dengan memahami Promise dan Async/Await, kamu dapat:

• Menangani proses asinkron tanpa blocking.

• Membuat kode lebih bersih dan mudah dibaca.

• Mengelola request API dengan UX yang lebih baik (spinner/loading).

Async/Await adalah cara modern dan efisien untuk menulis JavaScript yang cepat, responsif, dan profesional.