Close Menu

JavaScript Asynchronous

Table of Contents

JavaScript memiliki kemampuan untuk melakukan operasi asinkron, yaitu operasi yang dapat dijalankan di latar belakang tanpa menghentikan eksekusi kode lainnya. Ini sangat berguna untuk tugas-tugas yang memakan waktu lama, seperti pengambilan data dari server, pemrosesan file, atau animasi yang kompleks. Ada beberapa cara untuk menangani operasi asinkron dalam JavaScript, termasuk callback, Promise, dan async/await.

Callback #

Callback adalah fungsi yang dilewatkan sebagai argumen ke fungsi lain dan dieksekusi setelah operasi asinkron selesai. Callback sering digunakan dalam pengembangan JavaScript, tetapi bisa menjadi sulit dikelola dalam kasus yang lebih kompleks, yang dikenal sebagai “callback hell.”

Contoh Callback:

function fetchData(callback) {
    setTimeout(() => {
        callback("Data berhasil diambil");
    }, 1000);
}

fetchData((message) => {
    console.log(message); // Output setelah 1 detik: Data berhasil diambil
});

Promise #

Promise adalah objek yang mewakili operasi yang akan selesai di masa depan. Promise memiliki tiga status: pending, fulfilled, dan rejected. Promise lebih mudah dikelola dibandingkan callback dan membantu menghindari callback hell.

Contoh Promise:

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data berhasil diambil");
        }, 1000);
    });
}

fetchData().then((message) => {
    console.log(message); // Output setelah 1 detik: Data berhasil diambil
}).catch((error) => {
    console.error(error);
});

Async/Await #

Async/await adalah sintaks yang diperkenalkan di ES2017 (ES8) yang memungkinkan Anda menulis kode asinkron dengan cara yang lebih mirip dengan kode sinkron. Ini membantu membuat kode lebih bersih dan lebih mudah dibaca.

Contoh Async/Await:

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data berhasil diambil");
        }, 1000);
    });
}

async function fetchDataAsync() {
    try {
        let message = await fetchData();
        console.log(message); // Output setelah 1 detik: Data berhasil diambil
    } catch (error) {
        console.error(error);
    }
}

fetchDataAsync();

Menggunakan Async/Await dengan Fetch API #

Fetch API adalah antarmuka modern untuk melakukan HTTP request. Fetch API mengembalikan Promise, sehingga cocok digunakan dengan async/await.

Contoh Fetch API dengan Async/Await:

async function getUserData() {
    try {
        let response = await fetch("https://jsonplaceholder.typicode.com/users/1");
        if (!response.ok) {
            throw new Error("Network response was not ok " + response.statusText);
        }
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Fetch error: " + error.message);
    }
}

getUserData();

Contoh Lengkap Penggunaan Async/Await #

Berikut adalah contoh lengkap dari penggunaan async/await untuk mengambil data dari server dan menampilkan hasilnya di halaman web:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Async/Await</title>
</head>
<body>
    <h1>Data Pengguna</h1>
    <div id="userData"></div>

    <script>
        async function getUserData() {
            try {
                let response = await fetch("https://jsonplaceholder.typicode.com/users/1");
                if (!response.ok) {
                    throw new Error("Network response was not ok " + response.statusText);
                }
                let data = await response.json();
                document.getElementById("userData").innerHTML = `
                    <p>Nama: ${data.name}</p>
                    <p>Email: ${data.email}</p>
                    <p>Telepon: ${data.phone}</p>
                `;
            } catch (error) {
                console.error("Fetch error: " + error.message);
                document.getElementById("userData").innerText = "Gagal mengambil data";
            }
        }

        getUserData();
    </script>
</body>
</html>

Pada contoh di atas:

  • Fungsi getUserData menggunakan async/await untuk melakukan request ke API dan mengambil data pengguna.
  • Data pengguna ditampilkan di elemen dengan ID userData jika request berhasil.
  • Jika request gagal, pesan kesalahan ditampilkan di konsol dan pesan gagal ditampilkan di halaman.

Dengan memahami dan menggunakan teknik-teknik asinkron dalam JavaScript, Anda dapat menulis kode yang lebih responsif dan efisien. Jika ada pertanyaan lebih lanjut atau bagian yang perlu diperjelas, jangan ragu untuk bertanya.

What are your Feelings