Async dan Await dalam JavaScript

Apa itu Async/Await?

Async/Await adalah sintaks dalam JavaScript yang digunakan untuk menangani operasi asinkron secara lebih mudah dan lebih terstruktur dibandingkan dengan menggunakan callback atau promise secara langsung. Async/Await diperkenalkan di ECMAScript 2017 (ES8) dan memungkinkan Anda menulis kode asinkron yang terlihat dan berperilaku seperti kode sinkron.

Async

Kata kunci async digunakan untuk mendefinisikan fungsi asinkron. Fungsi yang didefinisikan dengan async secara otomatis mengembalikan promise. Nilai yang dikembalikan oleh fungsi async akan dibungkus dalam promise yang diselesaikan (resolved).

Await

Kata kunci await digunakan untuk menunggu promise diselesaikan (resolved) atau ditolak (rejected). await hanya dapat digunakan di dalam fungsi yang didefinisikan dengan async.

Contoh Penggunaan Async/Await

Contoh Sederhana

async function fetchData() {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    return data;
}

fetchData().then(data => console.log(data)).catch(error => console.error(error));

• Penjelasan:

  • fetchData adalah fungsi asinkron yang menggunakan async.

  • await digunakan untuk menunggu hasil dari fetch dan response.json() sebelum melanjutkan eksekusi kode.

  • Fungsi fetchData mengembalikan promise, sehingga kita dapat menggunakan .then dan .catch untuk menangani hasil dan kesalahan.

Contoh Async/Await dengan Penanganan Kesalahan

async function fetchData() {
    try {
        let response = await fetch('https://api.example.com/data');
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Fetch error:', error);
    }
}

fetchData();

• Penjelasan:

  • try...catch digunakan untuk menangani kesalahan yang mungkin terjadi selama operasi asinkron.

  • Jika fetch atau response.json() melemparkan kesalahan, itu akan ditangkap oleh catch dan pesan kesalahan akan dicetak ke konsol.

Sumber

• MDN Web Docs - async function

• JavaScript.info - Async/await

• W3Schools - JavaScript Async/Await

Async/Await memberikan cara yang lebih jelas dan mudah dipahami untuk menangani operasi asinkron dalam JavaScript, membuat kode lebih mudah dibaca dan dipelihara.