Mengelola Operasi Asinkron dengan Promise dan Async/Await dalam JavaScript

Mengelola operasi asinkron di JavaScript bisa menjadi rumit, tapi dengan Promise dan async/await, kita bisa menulis kode yang lebih bersih dan mudah dipahami. Di artikel ini, kita akan membahas cara menggunakan keduanya untuk menangani operasi asinkron dengan contoh praktis.

1. Membuat State dengan Objek Sederhana

kita mulai dengan membuat objek sederhana untuk menyimpan state:

let state = {
    text: 'text here'
};

2. Membuat Fungsi Asinkron dengan Promise

Misalnya kita ingin mendapatkan nama depan dan nama belakang dari suatu data secara asinkron. kita bisa menggunakan fungsi yang mengembalikan Promise:

function callFirstName() {
    return new Promise((resolve) => {
        setTimeout(() => resolve('John'), 1000);
    });
}

function callLastName() {
    return new Promise((resolve) => {
        setTimeout(() => resolve('Doe'), 3000);
    });
}

• callFirstName: akan resolve dengan “John” setelah 1 detik.
• callLastName: akan resolve dengan “Doe” setelah 3 detik.

3. Menggabungkan Nama dengan Async/Await

Dengan async/await, kita bisa menunggu hasil Promise dan menggabungkan nama depan dan belakang dengan mudah:

async function fullName() {
    const first = await callFirstName();
    const last = await callLastName();

    state.text = `${first} ${last}`;
    console.log(state.text); // Output: John Doe
}

• await menunggu Promise selesai sebelum melanjutkan eksekusi.
• state.text diperbarui dengan nama lengkap.

4. Mengelola Promise dengan Error Handling

Kadang saya ingin Promise bisa gagal dan mengembalikan pesan error. Contohnya:

function cobaPromise() {
    return new Promise((resolve, reject) => {
        const time = 1000;
        if (time < 2000) {
            setTimeout(() => resolve('done'), time);
        } else {
            reject('too long');
        }
    });
}

• resolve: dijalankan jika kondisi terpenuhi.
• reject: dijalankan jika kondisi gagal.

5. Menangani Promise dengan Async/Await dan Try/Catch

async/await bisa dipadukan dengan try/catch untuk menangani error dengan elegan:

async function coba() {
    try {
        state.text = await cobaPromise();
        console.log(state.text); // Output: done
    } catch (err) {
        state.text = err;
        console.log(state.text); // Output: too long
    }
}

• try mencoba menjalankan Promise.
• catch menangkap error jika Promise gagal.

Kesimpulan

Dengan Promise dan async/await, menangani operasi asinkron jadi lebih mudah, kode lebih bersih, dan alur eksekusi lebih dapat diprediksi. kita bisa menunggu hasil operasi, menangani error dengan jelas, dan menjaga aplikasi tetap responsif. Baik untuk kasus sederhana seperti penggabungan nama maupun skenario yang lebih kompleks, kedua fitur ini adalah alat yang sangat berguna di JavaScript.