Memahami Asinkron: Kekuatan Kode Responsif & Efisien

Dalam dunia komputasi modern yang terus bergerak cepat, kemampuan sebuah aplikasi untuk tetap responsif dan efisien adalah kunci utama keberhasilan. Pengguna berharap pengalaman yang lancar, tanpa jeda yang mengganggu, bahkan saat aplikasi sedang melakukan tugas-tugas berat di latar belakang. Inilah inti dari pemrograman asinkron—paradigma yang merevolusi cara kita merancang perangkat lunak, memungkinkan aplikasi melakukan banyak hal sekaligus tanpa mengorbankan pengalaman pengguna.

Artikel ini akan membawa Anda menyelami konsep asinkron secara mendalam. Kita akan memulai dengan memahami perbedaan mendasar antara operasi sinkron dan asinkron, mengapa asinkron menjadi sangat penting di era digital ini, dan bagaimana berbagai teknik dan pola telah berkembang untuk mengelola kompleksitasnya. Dari callbacks yang fundamental, hingga Promises yang elegan, dan akhirnya ke async/await yang intuitif, kita akan menjelajahi setiap tahapan evolusi, lengkap dengan contoh-contoh dan praktik terbaik. Persiapkan diri Anda untuk membuka potensi penuh dari aplikasi yang responsif, efisien, dan kuat.

1. Sinkron vs. Asinkron: Memahami Perbedaan Mendasar

Sebelum kita menyelami lebih jauh tentang bagaimana asinkron bekerja, sangat penting untuk memahami lawan katanya: sinkron. Pemahaman yang jelas tentang perbedaan antara kedua paradigma ini akan menjadi fondasi yang kuat untuk semua pembahasan selanjutnya.

1.1. Pemrograman Sinkron: Satu Langkah pada Satu Waktu

Bayangkan Anda sedang memasak di dapur sendirian. Anda mengambil bahan, mencincang bawang, menumisnya, merebus pasta, lalu menyajikan. Setiap langkah harus diselesaikan sebelum Anda bisa beralih ke langkah berikutnya. Jika Anda sedang mencincang bawang, Anda tidak bisa sekaligus merebus pasta. Ini adalah analogi sempurna untuk pemrograman sinkron.

Dalam konteks komputasi:

• Eksekusi Berurutan: Kode dieksekusi baris demi baris, secara berurutan.
• Blokir (Blocking): Ketika sebuah operasi (misalnya, membaca file besar, mengambil data dari internet) dimulai, eksekusi kode selanjutnya akan "terblokir" atau "tertunda" sampai operasi tersebut selesai.
• Sederhana untuk Dipahami: Alur kontrolnya sangat linear, membuatnya mudah untuk diikuti dan di-debug pada awalnya.
• Potensi Inefisiensi: Jika ada operasi yang memakan waktu lama, seluruh aplikasi bisa menjadi tidak responsif selama periode tersebut. Antarmuka pengguna (UI) bisa "membeku", dan pengguna tidak dapat berinteraksi.

Mari kita lihat contoh konseptual:

// Pseudocode Sinkron
fungsi ambilDataDariServer() {
    mulaiPengambilanData(); // Operasi ini memakan waktu 5 detik
    data = tungguDataSampaiTersedia(); // Eksekusi berhenti di sini
    return data;
}

tampilkanLoadingSpinner();
dataPengguna = ambilDataDariServer(); // UI akan membeku selama 5 detik di sini
sembunyikanLoadingSpinner();
tampilkanData(dataPengguna);

Dalam skenario di atas, aplikasi akan menampilkan spinner, kemudian benar-benar berhenti selama 5 detik saat menunggu data dari server. Setelah 5 detik, spinner akan disembunyikan dan data ditampilkan. Selama 5 detik tersebut, pengguna tidak bisa mengklik tombol lain, menggulir halaman, atau melakukan interaksi apapun. Ini adalah pengalaman pengguna yang buruk.

1.2. Pemrograman Asinkron: Multitugas Tanpa Memblokir

Sekarang, bayangkan Anda kembali ke dapur, tetapi kali ini Anda memiliki asisten atau Anda adalah koki yang lebih cerdas. Anda menyuruh pasta untuk direbus (yang akan memakan waktu 10 menit), tetapi Anda tidak hanya berdiri menunggu. Anda langsung beralih mencincang bawang, menyiapkan saus, dan melakukan hal lain yang bisa dilakukan secara bersamaan. Ketika pasta sudah matang, seseorang memberi tahu Anda, dan Anda baru kembali menanganinya.

Dalam konteks komputasi:

• Eksekusi Non-Blokir: Ketika sebuah operasi asinkron dimulai, eksekusi kode utama tidak berhenti. Ia melanjutkan ke baris berikutnya.
• Pemberitahuan Setelah Selesai: Ketika operasi asinkron selesai, aplikasi akan diberitahu (misalnya, melalui callback atau promise) dan dapat memproses hasilnya.
• Responsif: Antarmuka pengguna tetap responsif, dan tugas-tugas lain dapat terus berjalan.
• Kompleksitas Lebih Tinggi: Alur kontrolnya tidak linear, sehingga membutuhkan penanganan yang lebih hati-hati untuk mengelola urutan dan penanganan kesalahan.

Contoh konseptual asinkron:

// Pseudocode Asinkron
fungsi ambilDataDariServerAsinkron(callback) {
    mulaiPengambilanData(); // Operasi ini memakan waktu 5 detik
    // Eksekusi tidak berhenti di sini.
    // Ketika data siap, panggil callback dengan data
    setelahDataSiap(() => {
        callback(data);
    });
}

tampilkanLoadingSpinner();
ambilDataDariServerAsinkron(dataPengguna => {
    sembunyikanLoadingSpinner();
    tampilkanData(dataPengguna);
});
// Kode di sini akan langsung dieksekusi, tidak menunggu data
// Misalnya, pengguna bisa mengklik tombol lain atau menggulir

Dengan pendekatan asinkron, aplikasi akan menampilkan spinner, memulai permintaan data, dan langsung melanjutkan untuk menjalankan kode-kode lain. Pengguna dapat berinteraksi dengan aplikasi. Setelah 5 detik, ketika data siap, fungsi callback akan dipanggil, spinner disembunyikan, dan data ditampilkan. Pengalaman pengguna jauh lebih baik.

2. Mengapa Asinkron Menjadi Sangat Penting?

Di masa lalu, aplikasi desktop seringkali dapat lolos dengan pola sinkron karena tugas-tugas berat umumnya terbatas pada operasi lokal dan sumber daya CPU yang tersedia. Namun, dengan munculnya internet, komputasi terdistribusi, dan aplikasi web/mobile yang kaya fitur, batasan sinkronisasi menjadi sangat jelas dan tidak dapat diterima.

2.1. Pengalaman Pengguna (User Experience - UX) yang Lebih Baik

Ini adalah alasan utama dan paling mendesak. Pengguna modern memiliki ekspektasi tinggi terhadap aplikasi:

• Antarmuka Responsif: Pengguna harus selalu dapat berinteraksi dengan aplikasi, mengklik tombol, menggulir, dan mengisi formulir, bahkan saat aplikasi sedang memuat data atau melakukan komputasi berat. Tidak ada yang lebih membuat frustrasi daripada aplikasi yang "membeku".
• Persepsi Kecepatan: Meskipun operasi di latar belakang mungkin memakan waktu, jika UI tetap interaktif, pengguna akan merasa aplikasi lebih cepat dan lebih responsif.
• Multitasking yang Seamless: Aplikasi modern seringkali perlu melakukan beberapa hal sekaligus—mengunduh gambar, mengirim analisis, memperbarui feed berita, semuanya tanpa mengganggu pengguna dari tugas utama mereka.

2.2. Interaksi dengan Sumber Daya Eksternal

Hampir setiap aplikasi modern bergantung pada sumber daya eksternal yang lambat secara inheren.

• Permintaan Jaringan (API Calls): Mengambil data dari server jarak jauh (API REST, GraphQL) adalah operasi yang paling umum dan paling memakan waktu. Latensi jaringan bervariasi dan tidak dapat diprediksi.
• Operasi Input/Output (I/O): Membaca atau menulis file ke disk, mengakses database, atau berinterinteraksi dengan perangkat keras lain adalah operasi I/O yang secara signifikan lebih lambat daripada operasi CPU.
• Basis Data: Kueri basis data dapat memakan waktu, terutama untuk kueri kompleks atau data dalam jumlah besar.

2.3. Komputasi Berat

Meskipun sebagian besar eksekusi kode adalah cepat, ada kalanya aplikasi perlu melakukan komputasi yang intensif secara CPU, seperti:

• Pemrosesan gambar atau video.
• Algoritma machine learning.
• Enkripsi atau dekripsi data.
• Simulasi kompleks.

2.4. Efisiensi Sumber Daya dan Skalabilitas

Dalam lingkungan server-side (misalnya Node.js), model asinkron memungkinkan server menangani ribuan permintaan klien secara bersamaan dengan satu thread, tanpa perlu membuat thread baru untuk setiap permintaan. Ini sangat mengurangi overhead dan meningkatkan skalabilitas. Alih-alih menunggu satu permintaan selesai, server dapat memproses permintaan lain sambil menunggu respons dari operasi I/O yang lambat.

Singkatnya, pemrograman asinkron bukan lagi pilihan, melainkan keharusan untuk membangun aplikasi modern yang responsif, efisien, dan dapat diskalakan, memenuhi ekspektasi pengguna dan tuntutan infrastruktur saat ini.

3. Evolusi Pola Asinkron: Dari Callbacks hingga Async/Await

Seiring dengan meningkatnya kebutuhan akan pemrograman asinkron, berbagai pola dan mekanisme telah berevolusi untuk menyederhanakan cara kita menulis dan mengelola kode asinkron. Setiap pola memiliki kelebihan dan kekurangannya, dan pemahaman tentang evolusi ini akan membantu Anda menguasai teknik asinkron modern.

3.1. Callbacks: Fondasi Asinkron

Callbacks adalah cara paling dasar dan seringkali pertama kali yang diajarkan untuk menangani operasi asinkron. Sebuah callback adalah fungsi yang diteruskan sebagai argumen ke fungsi lain, dengan harapan fungsi tersebut akan "memanggil kembali" callback itu setelah operasi asinkron selesai.

3.1.1. Cara Kerja Callbacks

Ketika Anda memulai operasi asinkron, Anda memberikan fungsi callback. Fungsi asinkron akan memulai tugasnya dan segera kembali, memungkinkan kode lain untuk dieksekusi. Setelah tugas asinkron selesai, ia akan memanggil callback yang Anda berikan, seringkali dengan hasil atau kesalahan sebagai argumen.

// Contoh Pseudocode Callbacks
function ambilData(url, callback) {
    console.log("Memulai pengambilan data dari", url);
    // Simulasikan operasi jaringan yang memakan waktu
    setTimeout(() => {
        const data = { id: 1, nama: "Pengguna Contoh" };
        const error = null; // Bisa juga ada error
        console.log("Data selesai diambil.");
        callback(error, data); // Panggil callback dengan hasil
    }, 2000); // Tunggu 2 detik
}

console.log("1. Program dimulai.");

ambilData("https://api.example.com/users/1", (err, result) => {
    if (err) {
        console.error("Terjadi kesalahan:", err);
    } else {
        console.log("3. Data diterima:", result);
    }
});

console.log("2. Program melanjutkan eksekusi (tidak menunggu ambilData).");
// Output akan menunjukkan 1, 2, lalu setelah 2 detik baru 3.

3.1.2. Kelebihan Callbacks

• Sederhana untuk Konsep Dasar: Mudah dipahami pada tingkat paling dasar untuk operasi asinkron tunggal.
• Fleksibel: Dapat digunakan di hampir semua lingkungan pemrograman.

3.1.3. Kekurangan Callbacks: "Callback Hell"

Kekurangan terbesar dari callbacks muncul ketika Anda memiliki serangkaian operasi asinkron yang saling bergantung. Setiap operasi asinkron membutuhkan callback-nya sendiri, yang seringkali bersarang di dalam callback sebelumnya. Ini mengarah pada apa yang dikenal sebagai "Callback Hell" atau "Pyramid of Doom".

// Contoh Callback Hell
ambilDataPengguna(id, (err1, user) => {
    if (err1) { /* handle error */ return; }
    ambilPostsPengguna(user.id, (err2, posts) => {
        if (err2) { /* handle error */ return; }
        ambilKomentarPosts(posts[0].id, (err3, comments) => {
            if (err3) { /* handle error */ return; }
            simpanDataGabungan({ user, posts, comments }, (err4, success) => {
                if (err4) { /* handle error */ return; }
                console.log("Semua data berhasil diproses dan disimpan!");
            });
        });
    });
});

Kode seperti ini sangat sulit dibaca, di-debug, dan dikelola. Penanganan kesalahan menjadi berulang dan membosankan, dan alur logikanya menjadi tidak jelas. Inilah yang memicu kebutuhan akan solusi yang lebih baik.

3.2. Promises: Solusi untuk Callback Hell

Promises adalah objek yang merepresentasikan penyelesaian (atau kegagalan) operasi asinkron dan nilai hasilnya di masa depan. Mereka menyediakan cara yang lebih terstruktur dan dapat dibaca untuk mengelola operasi asinkron, terutama ketika ada beberapa operasi berantai.

3.2.1. Konsep dan Cara Kerja Promises

Sebuah Promise dapat berada dalam salah satu dari tiga status:

• pending: Status awal; operasi asinkron belum selesai.
• fulfilled (resolved): Operasi asinkron berhasil diselesaikan, dan Promise memiliki nilai hasil.
• rejected: Operasi asinkron gagal, dan Promise memiliki alasan kegagalan (error).

Setelah Promise beralih dari pending ke fulfilled atau rejected, statusnya tidak dapat berubah lagi. Kita dapat melampirkan handler (fungsi) ke Promise yang akan dipanggil ketika statusnya berubah.

// Contoh Pseudocode Promises
function ambilDataDenganPromise(url) {
    return new Promise((resolve, reject) => {
        console.log("Memulai pengambilan data dari", url);
        setTimeout(() => {
            const success = Math.random() > 0.3; // Simulasikan keberhasilan/kegagalan
            if (success) {
                const data = { id: 1, nama: "Pengguna Promise" };
                console.log("Data selesai diambil (Promise berhasil).");
                resolve(data); // Berhasil, panggil resolve
            } else {
                const error = new Error("Gagal mengambil data dari server.");
                console.error("Data gagal diambil (Promise ditolak).");
                reject(error); // Gagal, panggil reject
            }
        }, 2000);
    });
}

console.log("1. Program dimulai.");

ambilDataDenganPromise("https://api.example.com/users/1")
    .then(data => { // Dipanggil jika Promise fulfilled
        console.log("3. Data diterima (dari Promise):", data);
        return data.id; // Melewatkan nilai ke .then selanjutnya
    })
    .then(userId => {
        console.log("4. Memproses User ID:", userId);
        // Bisa memanggil Promise lain di sini untuk chaining
        return ambilDataDenganPromise(`https://api.example.com/posts?userId=${userId}`);
    })
    .then(posts => {
        console.log("5. Posts diterima:", posts);
    })
    .catch(error => { // Dipanggil jika Promise rejected di rantai manapun
        console.error("Terjadi kesalahan di rantai Promise:", error.message);
    })
    .finally(() => { // Dipanggil setelah Promise fulfilled atau rejected
        console.log("6. Operasi Promise selesai, terlepas dari hasilnya.");
    });

console.log("2. Program melanjutkan eksekusi (tidak menunggu Promise).");

3.2.2. Kelebihan Promises

• Alur Lebih Rapi: Mengubah "Callback Hell" menjadi rantai .then() yang lebih datar dan mudah dibaca (chaining).
• Penanganan Kesalahan Terpusat: Blok .catch() tunggal dapat menangani kesalahan dari seluruh rantai Promises.
• Komposisi yang Lebih Baik: Fungsi seperti Promise.all() dan Promise.race() memungkinkan Anda untuk mengelola beberapa Promises secara bersamaan.
• State Jelas: Status Promise yang eksplisit (pending, fulfilled, rejected) membantu dalam memahami dan debugging.

3.2.3. Kekurangan Promises

• Kurang Intuitif untuk Pemula: Konsep Promises dan chaining-nya bisa terasa abstrak bagi yang baru belajar.
• Masih Ada Callback: Meskipun lebih terstruktur, .then() dan .catch() masih menerima fungsi callback.
• Overhead Ringan: Sedikit overhead dibandingkan callback murni karena pembungkusan objek.

3.3. Async/Await: Asinkron Serasa Sinkron

async/await adalah penambahan sintaksis pada Promises yang membuat kode asinkron terlihat dan terasa seperti kode sinkron. Ini adalah cara paling modern dan disukai untuk menulis kode asinkron di banyak bahasa, terutama JavaScript, karena sangat meningkatkan keterbacaan dan kemudahan pemeliharaan.

3.3.1. Konsep dan Cara Kerja Async/Await

• async keyword: Digunakan untuk menandai sebuah fungsi bahwa ia akan melakukan operasi asinkron dan akan selalu mengembalikan sebuah Promise.
• await keyword: Hanya bisa digunakan di dalam fungsi async. Ini membuat eksekusi fungsi async "berhenti" sejenak sampai Promise yang dia await-kan selesai (baik fulfilled atau rejected). Setelah Promise selesai, nilai hasilnya akan dikembalikan, dan eksekusi fungsi async akan dilanjutkan.

Yang penting untuk diingat adalah await hanya menghentikan eksekusi di dalam fungsi async itu sendiri, bukan memblokir seluruh thread eksekusi aplikasi. Tugas-tugas lain di luar fungsi async masih dapat berjalan.

// Contoh Pseudocode Async/Await
function ambilDataDenganPromise(url) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = Math.random() > 0.3;
            if (success) {
                resolve({ id: 1, nama: "Pengguna Async/Await" });
            } else {
                reject(new Error("Gagal mengambil data."));
            }
        }, 1500);
    });
}

async function prosesDataAsinkron() {
    try {
        console.log("1. Memulai proses data asinkron.");
        const userData = await ambilDataDenganPromise("https://api.example.com/users/1");
        console.log("2. Data pengguna diterima:", userData);

        const postsData = await ambilDataDenganPromise(`https://api.example.com/posts?userId=${userData.id}`);
        console.log("3. Posts diterima:", postsData);

        const commentsData = await ambilDataDenganPromise(`https://api.example.com/comments?postId=${postsData[0].id}`);
        console.log("4. Komentar diterima:", commentsData);

        console.log("5. Semua data berhasil diambil dan diproses!");
        return { user: userData, posts: postsData, comments: commentsData };

    } catch (error) {
        console.error("Terjadi kesalahan dalam proses asinkron:", error.message);
        throw error; // Lempar kembali error agar bisa ditangkap di luar
    } finally {
        console.log("6. Fungsi prosesDataAsinkron selesai.");
    }
}

console.log("Program utama dimulai.");
prosesDataAsinkron()
    .then(finalResult => {
        if (finalResult) {
            console.log("Program utama: Hasil akhir:", finalResult);
        }
    })
    .catch(err => {
        console.error("Program utama: Menangkap error dari prosesDataAsinkron:", err.message);
    });
console.log("Program utama melanjutkan eksekusi (tidak menunggu prosesDataAsinkron).");

3.3.2. Kelebihan Async/Await

• Sangat Mudah Dibaca: Kode terlihat hampir sama dengan kode sinkron, sehingga sangat mudah untuk dipahami dan diikuti alurnya.
• Penanganan Kesalahan Familiar: Dapat menggunakan blok try...catch standar untuk penanganan kesalahan, yang lebih intuitif daripada .catch() pada Promises murni.
• Debugging Lebih Mudah: Alur eksekusi yang lebih linear membuat debugging lebih mudah, mirip dengan kode sinkron.
• Kompatibilitas dengan Promises: async/await dibangun di atas Promises, artinya Anda dapat menggunakan keduanya secara berdampingan dan memanfaatkan ekosistem Promises yang ada.

3.3.3. Kekurangan Async/Await

• Hanya untuk Fungsi Asinkron: Anda harus menggunakan await di dalam fungsi async. Ini berarti jika Anda memiliki kode asinkron di luar fungsi async (misalnya, di level atas script), Anda masih perlu menggunakan .then()/.catch() atau membungkusnya dalam IIFE (Immediately Invoked Function Expression) async.
• Potensi untuk Blokir yang Tidak Disadari: Jika terlalu banyak await digunakan secara berurutan untuk operasi yang sebenarnya bisa berjalan paralel, Anda mungkin tidak memanfaatkan kemampuan asinkron sepenuhnya. Perlu pemahaman kapan harus menunggu dan kapan harus menjalankan secara paralel (misalnya, dengan Promise.all()).

Secara keseluruhan, async/await adalah puncak evolusi pola asinkron yang sangat direkomendasikan untuk pengembangan modern karena keterbacaan dan kemudahan pemeliharaannya yang luar biasa.

4. Mekanisme di Balik Layar: Event Loop dan Non-Blocking I/O

Untuk memahami sepenuhnya bagaimana pemrograman asinkron dapat bekerja di lingkungan single-threaded seperti JavaScript (di browser atau Node.js), kita perlu memahami konsep fundamental di baliknya: Event Loop dan operasi I/O non-blocking.

4.1. Thread Tunggal vs. Multithreading

Beberapa bahasa dan lingkungan komputasi (misalnya Java, C#) mencapai konkurensi melalui multithreading, di mana beberapa instruksi dapat dieksekusi secara paralel (jika ada CPU core yang cukup) atau bergantian dalam waktu singkat. Namun, JavaScript (khususnya thread utamanya) adalah single-threaded. Ini berarti hanya ada satu call stack dan satu hal yang dapat diproses pada satu waktu.

Lalu, bagaimana bisa JavaScript menjadi asinkron dan non-blocking?

4.2. Peran Event Loop

Event Loop adalah mekanisme yang memungkinkan JavaScript melakukan pekerjaan non-blocking I/O meskipun sifatnya single-threaded. Ini bukanlah bagian dari JavaScript itu sendiri, melainkan bagian dari lingkungan runtime (seperti browser atau Node.js) yang berinteraksi dengan JavaScript.

Komponen-komponen utama yang terlibat dalam Event Loop:

• Call Stack: Ini adalah tempat kode JavaScript Anda dieksekusi. Ketika sebuah fungsi dipanggil, ia dimasukkan ke stack. Ketika fungsi selesai, ia dikeluarkan dari stack.
• Web APIs (di browser) / C++ APIs (di Node.js): Ini adalah bagian dari lingkungan runtime yang menyediakan fungsionalitas asinkron yang tidak dapat ditangani oleh JavaScript itu sendiri, seperti setTimeout(), fetch(), DOM events (click, load), atau operasi file I/O. Ketika Anda memanggil fungsi asinkron seperti setTimeout(), fungsi tersebut akan diserahkan ke Web API untuk ditangani di latar belakang.
• Callback Queue (Task Queue / Message Queue): Setelah sebuah operasi asinkron yang ditangani oleh Web APIs selesai, callback yang terkait dengannya tidak langsung dimasukkan ke Call Stack. Sebaliknya, callback tersebut ditempatkan dalam Callback Queue.
• Event Loop: Ini adalah proses yang terus-menerus memantau Call Stack dan Callback Queue. Jika Call Stack kosong (artinya tidak ada kode JavaScript yang sedang dieksekusi), Event Loop akan mengambil callback pertama dari Callback Queue dan memasukkannya ke Call Stack untuk dieksekusi.

4.2.1. Alur Eksekusi Event Loop

1. Eksekusi Kode Utama: Kode JavaScript Anda dieksekusi secara sinkron di Call Stack.
2. Operasi Asinkron Didelegasikan: Ketika fungsi asinkron (misalnya, setTimeout, fetch, klik event) dipanggil, ia langsung diserahkan ke Web APIs atau Node APIs untuk ditangani di latar belakang. Fungsi asinkron itu sendiri langsung kembali, dan eksekusi di Call Stack berlanjut ke baris berikutnya.
3. Selesainya Operasi Asinkron: Setelah Web APIs menyelesaikan tugasnya (misalnya, setTimeout sudah menunggu selama waktu yang ditentukan, data fetch sudah diterima), callback yang terkait dengan operasi tersebut ditempatkan ke dalam Callback Queue.
4. Event Loop Bertindak: Event Loop terus-menerus memeriksa apakah Call Stack kosong.
5. Pengiriman Callback: Jika Call Stack kosong, Event Loop akan mengambil callback pertama dari Callback Queue dan memasukkannya ke Call Stack agar dapat dieksekusi.
6. Siklus Berulang: Proses ini berulang, memastikan bahwa thread utama tidak pernah diblokir oleh operasi asinkron yang memakan waktu.

4.3. Non-Blocking I/O

Konsep I/O non-blocking sangat erat kaitannya dengan Event Loop. Ketika aplikasi Anda melakukan operasi I/O (misalnya, membaca dari disk, atau mengirim permintaan ke jaringan), ia tidak menunggu data benar-benar tiba atau ditulis. Sebaliknya, ia "memesan" operasi tersebut ke sistem operasi atau komponen lain yang dapat menanganinya di latar belakang.

Setelah operasi I/O selesai, sistem operasi memberi tahu lingkungan runtime (Node.js atau browser), yang kemudian menempatkan callback yang relevan ke dalam Callback Queue. Dengan demikian, thread utama aplikasi tidak pernah diblokir, memungkinkan ia untuk terus memproses permintaan lain atau menjaga UI tetap responsif.

Pemahaman tentang Event Loop dan non-blocking I/O adalah kunci untuk menulis kode JavaScript asinkron yang efektif dan untuk mendiagnosis perilaku yang tidak terduga terkait waktu. Ini adalah inti kekuatan JavaScript dalam menangani konkurensi meskipun sifatnya single-threaded.

5. Penanganan Kesalahan dalam Kode Asinkron

Salah satu aspek yang paling menantang dari pemrograman asinkron adalah penanganan kesalahan. Karena operasi tidak terjadi secara berurutan atau instan, melacak dan merespons kesalahan bisa menjadi lebih rumit dibandingkan dengan kode sinkron. Namun, setiap pola asinkron yang telah kita bahas memiliki cara tersendiri untuk mengelola kesalahan.

5.1. Penanganan Kesalahan dengan Callbacks

Dalam pola callback, konvensi umum adalah menggunakan "error-first callback", di mana argumen pertama yang diteruskan ke callback adalah objek Error (jika ada), dan argumen kedua adalah data hasil. Jika tidak ada kesalahan, argumen pertama adalah null atau undefined.

function bacaFile(namaFile, callback) {
    if (namaFile === "file_rusak.txt") {
        setTimeout(() => {
            callback(new Error("File rusak tidak bisa dibaca."), null);
        }, 500);
    } else {
        setTimeout(() => {
            callback(null, `Konten dari ${namaFile}`);
        }, 500);
    }
}

bacaFile("data.txt", (err, data) => {
    if (err) {
        console.error("Kesalahan membaca data.txt:", err.message);
    } else {
        console.log("Berhasil membaca data.txt:", data);
    }
});

bacaFile("file_rusak.txt", (err, data) => {
    if (err) {
        console.error("Kesalahan membaca file_rusak.txt:", err.message);
    } else {
        console.log("Berhasil membaca file_rusak.txt:", data);
    }
});

Kelebihan:

• Sederhana untuk operasi tunggal.
• Konvensi yang banyak digunakan.

Kekurangan:

• Pada "Callback Hell", penanganan kesalahan menjadi berulang di setiap level.
• Kesalahan yang tidak ditangani dengan hati-hati dapat "hilang" atau menyebabkan perilaku tak terduga jika callback tidak memeriksa argumen err.

5.2. Penanganan Kesalahan dengan Promises

Promises memperkenalkan mekanisme penanganan kesalahan yang jauh lebih kuat dan terpusat melalui metode .catch(). Ketika sebuah Promise di-rejected di mana pun dalam rantai .then(), eksekusi akan melompati semua .then() yang tersisa dan langsung menuju ke .catch() terdekat.

function ambilDataDariAPI(endpoint) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (endpoint === "/error") {
                reject(new Error("API Error: Tidak dapat mengakses endpoint ini."));
            } else {
                resolve({ message: `Data dari ${endpoint}` });
            }
        }, 1000);
    });
}

ambilDataDariAPI("/users")
    .then(data => {
        console.log("Data user:", data);
        return ambilDataDariAPI("/posts");
    })
    .then(posts => {
        console.log("Data posts:", posts);
        return ambilDataDariAPI("/error"); // Ini akan menyebabkan rejection
    })
    .then(comments => {
        // Baris ini tidak akan dieksekusi karena ada rejection sebelumnya
        console.log("Data comments:", comments);
    })
    .catch(error => {
        // Menangkap semua rejection dari rantai di atas
        console.error("Terjadi kesalahan pada rantai Promise:", error.message);
    });

// Promise yang tidak menangani error secara eksplisit bisa menyebabkan Unhandled Promise Rejection
ambilDataDariAPI("/fail_me")
    .then(data => console.log("Data ini tidak akan pernah muncul."))
    // .catch() tidak ada di sini, jadi error akan mengambang jika tidak ada penanganan global.
```

async function fetchDataAndProcess() {
    try {
        console.log("Memulai fetching data...");
        const users = await ambilDataDariAPI("/users");
        console.log("Users:", users);

        const posts = await ambilDataDariAPI("/error"); // Ini akan melempar error
        console.log("Posts:", posts); // Baris ini tidak akan dieksekusi

        const comments = await ambilDataDariAPI("/comments");
        console.log("Comments:", comments); // Baris ini juga tidak akan dieksekusi

    } catch (error) {
        // Menangkap error dari setiap 'await' di dalam blok try
        console.error("Error saat fetching atau memproses data:", error.message);
    } finally {
        console.log("Proses fetching selesai.");
    }
}

fetchDataAndProcess();