Cara Menggunakan Async Await di JavaScript

JavaScript adalah bahasa yang bersifat single-threaded dan non-blocking. Artinya, banyak operasi seperti mengambil data dari API atau membaca file berjalan secara asynchronous — tidak menunggu satu operasi selesai sebelum melanjutkan ke berikutnya. Dulu kita menanganinya dengan callback yang bertumpuk, lalu dengan Promise. Kini, async/await hadir sebagai cara paling elegan untuk menulis kode asynchronous.

Apa Itu Async/Await?

Async/await adalah sintaks yang diperkenalkan di ES2017 (ES8) yang dibangun di atas Promise. Ia tidak menggantikan Promise, melainkan menyederhanakan cara kita menulis dan membacanya. Kode yang tadinya penuh dengan .then() yang berantai kini bisa ditulis seperti kode synchronous biasa.

Cara Membuat Async Function

Tambahkan keyword async sebelum sebuah fungsi, dan fungsi tersebut secara otomatis akan mengembalikan Promise:

// Fungsi async sederhana
async function salamPagi() {
  return 'Selamat Pagi!';
}

// Hasilnya adalah Promise, bukan string langsung
salamPagi().then(pesan => console.log(pesan)); // 'Selamat Pagi!'

// Bisa juga ditulis sebagai arrow function
const salamMalam = async () => {
  return 'Selamat Malam!';
};

Menggunakan await

Keyword await hanya bisa digunakan di dalam fungsi yang ditandai async. Ia akan "menunggu" Promise selesai sebelum melanjutkan eksekusi:

function tunggoDua Detik() {
  return new Promise(resolve => setTimeout(resolve, 2000));
}

async function jalankan() {
  console.log('Mulai...');
  await tungguDuaDetik(); // Tunggu 2 detik
  console.log('Selesai setelah 2 detik!');
}

jalankan();

Async/Await dengan Fetch API

Contoh paling umum penggunaan async/await adalah saat mengambil data dari API:

async function ambilPengguna(id) {
  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
  const pengguna = await response.json();
  return pengguna;
}

async function tampilkanPengguna() {
  const pengguna = await ambilPengguna(1);
  console.log('Nama:', pengguna.name);
  console.log('Email:', pengguna.email);
  console.log('Kota:', pengguna.address.city);
}

tampilkanPengguna();

Menangani Error dengan try/catch

Keunggulan besar async/await adalah kemampuan menangani error dengan blok try/catch yang familiar, alih-alih menggunakan .catch() yang terkadang terlewat:

async function ambilData(url) {
  try {
    const response = await fetch(url);

    if (!response.ok) {
      // Lempar error manual jika status HTTP bukan 2xx
      throw new Error(`Gagal mengambil data. Status: ${response.status}`);
    }

    const data = await response.json();
    console.log('Data berhasil:', data);
    return data;

  } catch (error) {
    // Menangkap error jaringan ATAU error yang kita throw di atas
    console.error('Terjadi kesalahan:', error.message);
    return null; // Kembalikan null agar program tidak crash
  } finally {
    // Blok ini SELALU dijalankan, berhasil atau tidak
    console.log('Proses pengambilan data selesai.');
  }
}

ambilData('https://jsonplaceholder.typicode.com/posts/1');

Menjalankan Beberapa Async Secara Bersamaan

Kadang kita perlu menunggu beberapa operasi async sekaligus. Gunakan Promise.all() agar semua berjalan paralel, bukan berurutan:

async function ambilSemua() {
  // SALAH — berjalan berurutan, lebih lambat
  // const posts = await fetch('/api/posts').then(r => r.json());
  // const users = await fetch('/api/users').then(r => r.json());

  // BENAR — berjalan paralel, lebih cepat
  const [postResponse, userResponse] = await Promise.all([
    fetch('https://jsonplaceholder.typicode.com/posts?_limit=3'),
    fetch('https://jsonplaceholder.typicode.com/users?_limit=3')
  ]);

  const posts = await postResponse.json();
  const users = await userResponse.json();

  console.log('Posts:', posts.length);
  console.log('Users:', users.length);
}

ambilSemua();

Perbandingan: Promise .then() vs Async/Await

Lihat betapa jauh lebih bersih kode dengan async/await:

// Dengan Promise .then() — banyak callback
function versiPromise() {
  fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(res => res.json())
    .then(post => {
      return fetch(`https://jsonplaceholder.typicode.com/users/${post.userId}`);
    })
    .then(res => res.json())
    .then(user => {
      console.log('Penulis:', user.name);
    })
    .catch(err => console.error(err));
}

// Dengan async/await — jauh lebih mudah dibaca
async function versiAsync() {
  try {
    const postRes = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    const post = await postRes.json();

    const userRes = await fetch(`https://jsonplaceholder.typicode.com/users/${post.userId}`);
    const user = await userRes.json();

    console.log('Penulis:', user.name);
  } catch (err) {
    console.error(err);
  }
}

Kesimpulan

Async/await adalah cara terbaik untuk menulis kode asynchronous di JavaScript modern. Ia membuat alur logika lebih mudah dibaca seperti kode synchronous, penanganan error lebih intuitif dengan try/catch, dan debugging lebih mudah. Pastikan selalu menambahkan penanganan error agar aplikasimu tidak crash saat terjadi masalah jaringan atau data yang tidak sesuai.