Menghandle Asyncronus Programming pada `NodeJS` Dengan `Callback` — Ancreator

Setelah kemarin kita mengetahui apa itu Asyncronus dan Syncronus, dan kita mengetahui kalau NodeJS memiliki sifat Asyncronus yaitu function tidak akan menunggu proses function lain sampai kelar.

“ untuk yang belum tau bisa cek materi sebelumnya “

Apa pentingnya sih memakai callback untuk menghandle asyncronus programming ? Ok kalian tau sendiri kalau asyncronus programming itu tidak menunggu sebuah proses function selesai jadi secara acak yang mana yang duluan selesai maka dia yang akan di return duluan. Nah, masalahnya dimana ? Untuk kalian yang sering melakukan fetch API pasti ada dimana waktu kalian melakukan ‘ HTTP REQUEST’ kepada sebuah ‘ API’ dan kadang bisa memakan waktu lama, mau tidak mau kita harus menunggu proses ‘ REQUEST’ tersebut kelar karena misal value yang kita dapat dari ‘ REQUEST’ kita butuhkan di variable setelah request.

Ok langsung aja ke example, dibawah ini adalah example sederhana :

function namaDepan() {
    return 'amin';
}
function namaBelakang() {
    return 'udin'
}
function returnAll() {
    const firstName = namaDepan();
    const lastName = namaBelakang();
    console.log(firstName, lastName);
}
returnAll();

Untuk di script diatas kalian akan merasakan seperti syncronus programming karena di eksekusi secara berurutan dan kita bisa memiliki value firstName dan lastName. Ok, bagaimana kalau dengan nama belakang saya panggil dari sebuah ‘ API’ yang lama ‘ REQUEST ‘ nya sekitar 3detik :

function namaDepan() {
    return 'amin';
}
function namaBelakang() {
    setTimeout(() => {
        return 'udin';
    }, 3000);
}
function returnAll() {
    const firstName = namaDepan();
    const lastName = namaBelakang();
    console.log(firstName, lastName);
}
returnAll();

Si variable lastName pasti akan mereturn nilai ‘ undefined’ karena console.log(firstName, lastName) tidak akan menunggu si lastName mendapatkan sebuah value ‘ udin’ karena harus menunggu selama 3detik, kurang mengerti ? Ok kembali lagi ke sifat awal NodeJS yang asyncronus/non-blocking dan coba resapi jadi si console.log tidak akan menunggu si lastName mendapatkan sebuah value.

Jika sudah mengerti, nah bagaimana cara mengatasi ini ? Yaps salah satunya dengan callback.

Callback atau call me back jadi memanggil kembali, jadi proses callback adalah misal si callback kita taruh di function namaBelakang() nah maka kita akan mengakses namaBelakang() terlebih dahulu dan di namaBelakang() sendiri memiliki waktu tunggu selama 3detik maka kita harus menunggu, tapi sambil menunggu kita juga sambil mengakses namaDepan() dan ketika si namaBelakang() sudah siap atau value ‘ udin’ sudah tersedia dia akan mereturn console.log(firstName, lastName) seperti pada example pertama tadi yaitu complete amin dan udin.

Bagaimana cara memakai callback ? Jadi callback adalah sebuah function, nah nanti kita mengirimkan function kedalam parameter yaitu callback, jadi kita tida mereturn ‘udin’ dengan return lagi tapi dengan callback ok langsung saja ke examplenya :

function namaDepan() {
    return 'amin';
}
function namaBelakang(cb) {
    setTimeout(() => {
        cb('udin')
    }, 3000);
}
function returnAll() {
    namaBelakang((cbLastNameResult) => {
        const firstName = namaDepan();
        const lastName = cbLastNameResult;
        console.log(firstName, lastName);
    })
}
returnAll();

Ok bisa dilihat disini dia akan menampilkan amin udin dengan normal, Ok misal kalian sudah bisa menggunakan callback ada permasalahan yang datang yaitu ‘ CALLBACK HELL’ si callback ini akan terus kekanan indence nya, kita kasih example dibawah ini :

function namaDepan(cb) {
    setTimeout(() => {
        cb('amin')
    }, 3000);
}
function namaBelakang(cb) {
    setTimeout(() => {
        cb('udin')
    }, 3000);
}
function returnAll() {
    namaDepan((cbFirstNameResult) => {
        namaBelakang((cbLastNameResult) => {
            const firstName = cbFirstNameResult;
            const lastName = cbLastNameResult;
            console.log(firstName, lastName);
        })
    })
}
returnAll();

Seperti example diatas kita melakukan request selama 6 detik ke masing masing function 3detik jadi ada 2callback saja sudah gaenak diliat dan pasti kalau ada 100++ bakal pusing dalam melakukan debugging atau apapun, maka dari itu next kita akan membahas ‘ Promise’ untuk mengatasi ‘callback hell’

Originally published at https://ancreator.com on December 10, 2019.