loading...

Handle Async Callback Javascript

guntur profile image Guntur Poetra Updated on ・2 min read

Di javascript sudah tak asing lagi dengan istilah callback. Callback sendiri adalah function yang disisipkan function sebagai paramater atau argument. Callback sangat erat kaitannya dengan asynchronous.

Sebuah fungsi yang menerima function sebagai parameter-nya, merupakan ciri dari asynchoronous function, sehingga dapat kita berikan parameter tersebut sebagai anonymous atau naming function.

function cekTahun(callback) {
    setTimeout(function () {
        callback((new Date()).getFullYear());
    }, 2000);
}

Function cekTahun menerima sebuah parameter atau argument dengan nama callback bertipe function. Pada saat callback di invoke, akan mengembalikan nilai dari tahun.

Contoh menggunakan anonymous function.

cekTahun(function (tahun) {
    console.log('Sekarang adalah tahun:', tahun);
});

handle-async-callback

Contoh dengan menggunakan naming function.

function tampilkanTahun(tahun) {
    console.log('Sekarang adalah tahun:', tahun);
}

cekTahun(tampilkanTahun);

handle-async-callback_2

Terlihat pada gambar, tidak ada perbedaan dari kedua hasil gambar diatas, baik anonymous maupun naming function. Ini hanyalah cara anda untuk mengorganisir setiap baris kode agar tertata rapi dan mudah dibaca.

Kekeliruan Umum Mengolah Asynchronous

Kekeliruan umum pada saat menghandle asynchronous operation, adalah menghandlenya layaknya synchronous. Misalnya...

function cekTanggal() {
    return setImmediate(function () {
        return (new Date()).getDate();
    });
}

const tanggal = cekTanggal();
console.log('Sekarang tanggal:', tanggal);

handle-async-callback_mistake

Function cekTanggal mengembalikan nilai dari function setImmediate, yang tentu saja tidak sesuai ekspetasi anda. Ini adalah kekeliruan yang umum, bahkan saya pribadi juga pernah keliru tentang ini.

Terkait

Posted on by:

Discussion

pic
Editor guide