contoh async dan wait pada javascript

 

Berikut adalah contoh penggunaan async dan await dalam JavaScript. Pendekatan ini memungkinkan Anda menangani operasi asynchronous (seperti fetch data dari API atau bekerja dengan Promise) dengan cara yang lebih sederhana dan mudah dibaca.

---

Contoh Dasar async dan await

 // Fungsi asynchronous dengan async/await
async function fetchData() {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts'); // Menunggu hasil fetch
        const data = await response.json(); // Menunggu hasil parsing JSON
        console.log(data); // Menampilkan data
    } catch (error) {
        console.error('Terjadi kesalahan:', error); // Menangkap error jika terjadi
    }
}

fetchData();

Penjelasan:

1. async: Menandai fungsi sebagai asynchronous sehingga dapat menggunakan await di dalamnya.
2. await: Menunggu hasil dari Promise (misalnya fetch atau response.json()) sebelum melanjutkan eksekusi kode berikutnya.
3. try...catch: Digunakan untuk menangani error pada operasi asynchronous.

---

Contoh Fungsi dengan Delay (Simulasi Operasi Asynchronous)

 // Fungsi untuk simulasi delay
function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

// Fungsi asynchronous dengan async/await
async function run() {
    console.log('Mulai');
    
    await delay(2000); // Menunggu 2 detik
    console.log('Tunggu 2 detik selesai');
    
    await delay(1000); // Menunggu 1 detik
    console.log('Tunggu 1 detik selesai');
    
    console.log('Selesai');
}

run();

 

 

Penjelasan:

1. Fungsi delay mengembalikan Promise yang akan selesai setelah waktu tertentu (ms milidetik).
2. await delay(2000) memastikan kode menunggu 2 detik sebelum melanjutkan.

Output:

 Mulai
(Tunggu 2 detik...)
Tunggu 2 detik selesai
(Tunggu 1 detik...)
Tunggu 1 detik selesai
Selesai

 

 

Contoh Kombinasi async/await dengan Loop

Misalnya, Anda ingin memproses beberapa operasi asynchronous secara berurutan.

 async function processItems(items) {
    for (const item of items) {
        await delay(1000); // Tunggu 1 detik untuk setiap item
        console.log(`Proses item: ${item}`);
    }
    console.log('Semua item selesai diproses!');
}

// Array item
const items = [1, 2, 3, 4, 5];

processItems(items);

 

 Output:

 (Proses 1 detik untuk setiap item...)
Proses item: 1
Proses item: 2
Proses item: 3
Proses item: 4
Proses item: 5
Semua item selesai diproses!

 

 

Contoh Fungsi Async yang Mengembalikan Nilai

Fungsi asynchronous tetap dapat mengembalikan nilai seperti fungsi biasa.

async function calculateSum(a, b) {
    const result = a + b;
    return result; // Mengembalikan hasil (Promise secara implisit)
}

async function main() {
    const sum = await calculateSum(5, 7); // Menunggu hasil dari calculateSum
    console.log(`Hasil penjumlahan: ${sum}`);
}

main();

 Output:

 Hasil penjumlahan: 12

 

 

Kesimpulan

1. async: Membuat fungsi bekerja secara asynchronous dan mengembalikan Promise.
2. await: Membuat eksekusi kode menunggu hingga Promise selesai.
3. Error Handling: Gunakan try...catch untuk menangani error pada operasi asynchronous.

Dengan async/await, kode asynchronous menjadi lebih sederhana, mudah dibaca, dan menyerupai kode synchronous.