Widget HTML #1

Beranda / JavaScript / Learn Javascript

Async Await: Sihir Modern untuk Kode yang Bersih!

Posting Komentar

Halo teman-teman! 👋

Kali ini, kita bakal membahas sesuatu yang super seru dan juga penting buat teman-teman yang pengen bikin aplikasi web modern: Async Await di JavaScript! 😎

Jadi, apa sih Async Await itu? Kalau teman-teman sering koding dan berurusan dengan API, proses asinkron, atau permintaan HTTP (misalnya mengambil data dari server), teman-teman pasti sering ketemu istilah "asynchronous programming". Sederhananya, proses async itu seperti kita lagi pesan makanan di restoran: kita pesan (request), lalu tunggu sambil ngapain-ngapain dulu (asynchronous), dan nanti makanannya bakal datang (response). Nah, biar kita bisa nunggu dengan cara yang lebih santai dan nggak ribet, di sinilah si Async Await berperan!

Apa Itu Asynchronous Programming? 🤔

Asynchronous programming memungkinkan JavaScript menjalankan tugas di latar belakang sambil tetap melanjutkan eksekusi kode lainnya. Bayangkan teman-teman lagi pesan burger di restoran. Teman-teman pesan, dan sambil nunggu pesanan datang, kalian bisa lanjut main HP, ngobrol sama teman, atau hal lainnya. Begitu pesanan selesai, server bakal kasih tahu (response).

Dalam JavaScript, cara ini biasa kita temui waktu berurusan dengan fungsi-fungsi yang tidak bisa langsung memberi hasil, seperti:

  • Mengambil data dari server (HTTP request).
  • Membaca file di komputer.
  • Timer (setTimeout).

Callback dan Promise: Fondasi dari Async Await

Callback

Callback adalah fungsi yang dipanggil setelah proses asinkron selesai. Ini adalah cara lama untuk menangani async programming di JavaScript. Namun, jika terlalu banyak callback yang dipakai, bisa menyebabkan kode jadi berantakan (dikenal sebagai "callback hell").


setTimeout(function() {
    console.log("Ini dipanggil setelah 2 detik!");
}, 2000);

Promise

Kemudian datang Promise sebagai solusi untuk membuat kode lebih rapi. Promise adalah objek yang mewakili keberhasilan atau kegagalan suatu operasi asinkron di masa mendatang.


let janji = new Promise(function(resolve, reject) {
    let sukses = true;
    if (sukses) {
        resolve("Janji dipenuhi!");
    } else {
        reject("Janji tidak dipenuhi!");
    }
});

janji.then(function(result) {
    console.log(result);
}).catch(function(error) {
    console.log(error);
});

Async Await: Solusi Modern yang Rapi dan Mudah Dibaca

Async Await adalah sintaks modern yang dibangun di atas Promise, tapi dengan gaya penulisan yang lebih sederhana dan menyerupai kode sinkron. Bayangkan teman-teman bisa menulis kode yang "menunggu" hasil tanpa harus menggunakan .then() berulang-ulang. Ini mirip seperti teman-teman menulis kode biasa, tapi dengan kekuatan super untuk menangani proses async di balik layar.


async function sayHello() {
    let promise = new Promise((resolve, reject) => {
        setTimeout(() => resolve("Halo teman-teman!"), 2000);
    });

    let result = await promise; // Menunggu promise selesai
    console.log(result); // Output setelah 2 detik: Halo teman-teman!
}

sayHello();

Contoh Real-Life: Mengambil Data dari API dengan Async Await

Sekarang, mari kita buat contoh yang lebih nyata. Kita akan membuat aplikasi sederhana yang mengambil data dari API publik menggunakan fetch() dan menampilkan hasilnya di halaman web.

Membuat File index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fetch Data API dengan Async Await</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        h1 {
            color: #333;
        }
        ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            margin: 10px 0;
            padding: 10px;
            background-color: #f4f4f4;
        }
    </style>
</head>
<body>
    <h1>Daftar Pengguna</h1>
    <button id="ambilData">Ambil Data Pengguna</button>
    <ul id="daftarPengguna"></ul>

    <script>
        // Fungsi untuk mengambil data dari API
        async function fetchData() {
            try {
                const response = await fetch('https://jsonplaceholder.typicode.com/users');
                const users = await response.json(); // Menunggu hasil parsing JSON
                return users;
            } catch (error) {
                console.error('Terjadi kesalahan:', error);
            }
        }

        // Fungsi untuk menampilkan data ke dalam HTML
        async function tampilkanData() {
            const users = await fetchData();
            const daftarPengguna = document.getElementById('daftarPengguna');
            
            // Membersihkan daftar sebelumnya
            daftarPengguna.innerHTML = '';

            // Menampilkan data pengguna
            users.forEach(user => {
                const li = document.createElement('li');
                li.textContent = `${user.name} - ${user.email}`;
                daftarPengguna.appendChild(li);
            });
        }

        // Event listener untuk tombol
        document.getElementById('ambilData').addEventListener('click', tampilkanData);
    </script>
</body>
</html>

Kesimpulan

Wah, teman-teman, seru banget ya belajar tentang Async Await! Dengan sintaks modern ini, kita bisa menulis kode asynchronous yang lebih bersih, mudah dibaca, dan lebih nyaman digunakan dibandingkan dengan callback atau bahkan Promise biasa.

Jadi, intinya Async Await itu seperti sihir modern yang membantu kita menangani proses async dengan cara yang lebih sederhana. Nggak ada lagi tuh kode berantakan penuh .then() atau callback berlapis-lapis. Semua jadi rapi dan efisien! 🎉

Selamat mencoba dan happy coding! 👨‍💻👩‍💻

List Part Artikel

Posting Komentar untuk "Async Await: Sihir Modern untuk Kode yang Bersih!"

Posting Komentar