Async dan Await di JavaScript: Panduan Lengkap dan Contohnya

Dalam pengembangan web modern, menangani operasi asinkron adalah bagian penting dalam membangun aplikasi yang responsif dan efisien. JavaScript memiliki beberapa mekanisme untuk menangani tugas asinkron, seperti callback, Promise, dan yang lebih modern adalah async dan await. Dengan async dan await, penulisan kode asinkron menjadi lebih mudah dibaca dan dipahami, menyerupai kode sinkron.

Artikel ini akan membahas secara mendalam apa itu async dan await, bagaimana cara menggunakannya, serta contoh implementasi dalam berbagai kasus penggunaan.

Baca juga: QA Engineer Vs Software Tester? Mana yang Dibutuhkan

Apa Itu Async dan Await?

Async dan await adalah fitur dalam JavaScript yang diperkenalkan dalam ECMAScript 2017 (ES8) untuk menangani operasi asinkron dengan lebih sederhana dibandingkan dengan callback dan Promise.

• Async adalah kata kunci yang digunakan untuk mendeklarasikan sebuah fungsi agar selalu mengembalikan Promise. Jika suatu fungsi diberi kata kunci async, maka secara otomatis ia akan mengembalikan sebuah Promise.
• Await digunakan di dalam fungsi async untuk menunggu hasil dari sebuah Promise tanpa perlu menggunakan metode .then(). Dengan await, eksekusi kode akan ditunda sampai Promise tersebut selesai.

Dengan menggabungkan async dan await, kita dapat menulis kode yang lebih bersih dan lebih mudah dipahami dibandingkan menggunakan Promise chaining atau callback hell.

Menggunakan Async dan Await dalam JavaScript

1. Mendeklarasikan Fungsi Async

Untuk menggunakan await, sebuah fungsi harus dideklarasikan sebagai fungsi async. Berikut adalah contoh mendeklarasikan fungsi async:

async function fetchData() {

  return "Data berhasil diambil";

}

fetchData().then(console.log); // Output: Data berhasil diambil

Dalam contoh di atas, fungsi fetchData() selalu mengembalikan sebuah Promise, meskipun kita tidak secara eksplisit menuliskan Promise.resolve(). JavaScript secara otomatis mengubah nilai return menjadi Promise.

2. Menggunakan Await untuk Menunggu Promise

Sekarang, mari kita gunakan await untuk menangani sebuah Promise di dalam fungsi async.

async function fetchData() {

  let data = await new Promise(resolve => setTimeout(() => resolve("Data berhasil diambil"), 2000));

  console.log(data);

}

fetchData();

Dalam contoh ini, await digunakan untuk menunggu penyelesaian dari Promise yang menyimulasikan pengambilan data dalam 2 detik. Ketika Promise selesai, hasilnya disimpan dalam variabel data, lalu ditampilkan ke konsol.

3. Menangani Error dengan Try...Catch

Saat bekerja dengan operasi asinkron, kita harus menangani kemungkinan terjadinya error. Dengan async dan await, kita bisa menggunakan try...catch untuk menangani kesalahan dengan cara yang lebih bersih dibandingkan dengan .catch() pada Promise.

async function fetchData() {

  try {

    let response = await fetch("https://jsonplaceholder.typicode.com/posts/1");

    let data = await response.json();

    console.log(data);

  } catch (error) {

    console.error("Terjadi kesalahan: ", error);

  }

}

fetchData();

Dalam contoh ini, jika terjadi error saat mengambil data dari API, error tersebut akan ditangkap di dalam blok catch, sehingga tidak menyebabkan aplikasi berhenti.

Perbandingan Async/Await dengan Promise dan Callback

Sebelum async dan await, developer menggunakan callback dan Promise untuk menangani operasi asinkron. Namun, kedua metode ini memiliki beberapa kelemahan.

1. Callback Hell – Struktur kode yang kompleks saat terlalu banyak callback yang bersarang.
2. Promise Chaining – Meskipun lebih baik daripada callback, penggunaan .then().catch() yang panjang masih membuat kode sulit dibaca.
3. Async/Await – Menawarkan sintaks yang lebih bersih dan menyerupai kode sinkron, sehingga lebih mudah dikelola.

Contoh kode menggunakan Promise chaining:

fetch("https://jsonplaceholder.typicode.com/posts/1")

  .then(response => response.json())

  .then(data => console.log(data))

  .catch(error => console.error("Terjadi kesalahan: ", error));

Dengan async dan await, kode yang sama dapat ditulis dengan lebih sederhana:

async function getData() {

  try {

    let response = await fetch("https://jsonplaceholder.typicode.com/posts/1");

    let data = await response.json();

    console.log(data);

  } catch (error) {

    console.error("Terjadi kesalahan: ", error);

  }

}

getData();

Dengan async dan await, kode lebih ringkas dan mudah dipahami tanpa harus berurusan dengan banyak .then().

Kasus Penggunaan Async dan Await dalam Aplikasi Nyata

1. Mengambil Data dari API

Salah satu penggunaan utama async dan await adalah dalam pengambilan data dari API. Seperti contoh sebelumnya, menggunakan fetch dengan await memungkinkan pengolahan data menjadi lebih efisien.

2. Menangani Multiple Promise dengan Promise.all

Saat ada lebih dari satu Promise yang harus dijalankan bersamaan, kita bisa menggunakan Promise.all(). Ini memungkinkan beberapa operasi dijalankan secara paralel dan menunggu semuanya selesai sebelum melanjutkan eksekusi.

async function fetchMultipleData() {

  try {

    let [data1, data2] = await Promise.all([

      fetch("https://jsonplaceholder.typicode.com/posts/1").then(res => res.json()),

      fetch("https://jsonplaceholder.typicode.com/posts/2").then(res => res.json())

    ]);

    console.log(data1, data2);

  } catch (error) {

    console.error("Terjadi kesalahan: ", error);

  }

}

fetchMultipleData();

Kode di atas memungkinkan dua fetch API dilakukan secara paralel, sehingga lebih efisien dibandingkan menjalankan satu per satu.

Baca juga: DeepSeek AI: Ancaman atau Peluang bagi Industri Teknologi?

Kesimpulan

Async dan await adalah fitur penting dalam JavaScript modern yang membantu mengatasi kompleksitas dalam menangani operasi asinkron. Dengan menggunakan async dan await, kode menjadi lebih bersih, mudah dibaca, dan menyerupai alur eksekusi sinkron.

Dengan memahami konsep ini dan menerapkannya dalam pengembangan aplikasi, developer dapat meningkatkan efisiensi dan keterbacaan kode mereka, serta menghindari jebakan seperti callback hell atau promise chaining yang kompleks. Jika digunakan dengan baik, async dan await dapat menjadi alat yang sangat kuat dalam pengelolaan tugas asinkron dalam JavaScript.