Pemahaman Dasar Async Await di JavaScript untuk Pemula

Photo by Mohammad Rahmani on Unsplash

Apa itu Async dan Await?

Oke, sebelum beranjak ke pembahasan cara penggunaan async/await dalam JavaScript, penting untuk memahami pengertiannya terlebih dahulu.

async/await merupakan cara untuk menangani fungsi secara asynchronous dalam JavaScript. Sejatinya, JavaScript sendiri berjalan secara synchronous. Namun, untuk menangani operasi yang membutuhkan waktu lama tanpa menghalangi eksekusi kode lainnya, kita menggunakan cara asynchronous melalui metode async/await.

Penggunaan async/await ini juga membantu penulisan kode kita mudah dipahami dan dibaca, sehingga tanpa menggunakan .then() untuk menunggu hasil Promise berhasil diolah.

Async/Await dalam Bahasa Sederhana

Bingung ya?

Mari simak penjelasan dalam bahasa sederhana, coba bayangkan peristiwa ini:

Kamu sedang terburu-buru untuk berangkat ke kampus. Namun, ternyata ada banyak sekali pekerjaan yang belum diselesaikan, seperti mengepel lantai. Untuk itu, kamu menyalakan vacuum cleaner untuk membersihkan lantai rumahmu, dan kamu pergi bersiap-siap.

Kamu memberikan perintah kepada vacuum cleaner untuk memberitahumu jika pekerjaannya sudah selesai. Vacuum cleaner pun akan berhenti ketika tugasnya selesai, dan kamu akan melihat sebentar apakah lantainya sudah bersih atau belum.

Dalam konteks kode, ini berarti kamu menulis fungsi yang melakukan pekerjaan (membersihkan lantai) secara asynchronous, dan kamu menggunakan await untuk menunggu hasilnya sebelum melanjutkan ke tugas berikutnya.

Cara Penggunaan Async/Await

• async

Penggunaan keyword async digunakan untuk mendeklarasikan fungsi asynchronous dan fungsi async selalu mengembalikan Promise.

async function  lantaiDibersihkan() {
  console.log("Mulai membersihkan lantai..."); 
  // belum ada await
  console.log("Lantai selesai dibersihkan!"); }
}

• await

Penggunaan keyword await digunakan untuk menunggu hasil dari sebuah Promise. Perlu diingat, await tidak bisa berdiri sendiri, sehingga perlunya dimasukan ke dalam async function, seperti berikut:

async function lantaiDibersihkan() { 
  console.log("Mulai membersihkan lantai..."); 
  // tambahkan await, misalnya menunggu proses membersihkan lantai selesai  
  await new Promise(resolve => { 
    setTimeout(() => { 
      console.log("3 detik telah berlalu!");
      resolve(); 
      }, 3000); 
    }); 
  console.log("Lantai selesai dibersihkan!"); 
} 
lantaiDibersihkan();

Penulisan Tanpa async/await

Jika tidak menggunakan async/await, kita harus menggunakan .then() dan .catch() untuk menangani Promise yang dikembalikan oleh fetch.

function getData() {  
  return fetch('https://api.example.com/data')    
  .then(response => response.json()) 
    .then(data => console.log(data)) 
    .catch(error => console.log('Error:', error)); 
}

Kelebihan Penggunaan Async/Await

Tentunya dengan menulis kode dengan menggunakan metode async/await akan mempermudah dalam membaca kode. Struktur penulisan kode juga akan jauh lebih bersih.

Selain mudah dibaca, penanganan error dalam penulisan async/await juga jauh lebih mudah. Kita bisa menggunakan metode try … catch untuk menangkap error, daripada menggunakan .catch(). Selain itu, await juga memudahkan kita dalam menunggu hasil Promise dan hasilnya akan secara terstuktur penulisannya.

Belajar JavaScript Lebih Mudah

Gimana? Mudah bukan dalam mempelajari salah satu sintaks dalam JavaScript.

Jika kamu tertarik untuk belajar lebih jauh mengenai JavaScript, kamu bisa join course Sekolah Koding — JavaScript.

Belajar Javascript untuk website

Belajar di Sekolah Koding akan jauh lebih mudah dan efektif!

Website belajar Coding Indonesia - SkoDev

Kamu bisa dapatkan panduan lengkap dan tutorial langkah-demi-langkah untuk menguasai JavaScript dengan cepat. Dapatkan akses ke komunitas aktif yang siap membantu saat kamu menghadapi kesulitan.

Yuk bergabung sekarang dan tingkatkan keterampilan coding kamu!