Sering kita jumpai postingan di sosmed yang bermasalah dengan penggunaan Ajax. Terkadang masalahnya cukup simple, ketika kita paham dengan apa itu teknologi Ajax sebenarnya tidak akan menemui masalah klasik ini. Namun, sayangnya sebagian dari kita berangkat dari kebiasaan copy-paste dan enggan meluangkan waktu untuk membaca sedikit teorinya.

Contoh kasusnya seperti ini:

function get() {
    var value = null; 

    $.ajax({
        url: 'data.php'
    }).done(function(data){
        value = data;
    });

    return value;
}

console.log( get() );

Jika kita jalankan potongan kasus di atas, tentunya akan menghasilkan null. Sebelum kita kupas problem-nya, kita coba satu ilustrasi kasus lagi seperti ini:

function get() {
    var value = null;

    setTimeout(function(){
        value = 5;
    }, 2000);

    return value;
}

console.log(get());

Jika kita jalankan, hasilnya pun sama null. Jadi, walaupun kedua kasus tersebut dituliskan dengan script yang berbeda, namun mempunyai kesamaan perilaku yakni sama-sama tidak merubah variabel value.

Pertanyaannya, apakah variabel value tidak pernah benar-benar berubah? Variabel tersebut sebenarnya berubah nilainya, tapi setelah beberapa saat kemudian. Umumnya, proses ajax tidak menyebabkan adanya blocking, sehingga perintah sesudah ajax akan langsung dijalankan tanpa menunggu proses ajax selesai. Demikian juga dengan penggunaan setTimeout(). Inilah yang yang disebut dengan proses asynchronous.

Lalu, bagaimana dan kapan caranya kita mendapatkan nilai yang diproses secara asynchronous ? Kita dapat menggunakan beberapa teknik sebagai berikut:

Callback

Callback umumnya adalah fungsi anonymous atau closure yang dijadikan sebagai argumen fungsi lain. Sebagai contoh:

function get(callback) {
    $.ajax({
        url: '...'
    }).done(function(value){
        callback(value);
    });
}

get(function(value){
    console.log(value);
});

Cukup mudah bukan? Namun, ada sedikit catatan untuk penggunaan callback. Terkadang kita memerlukan conditional callback maupun nested callback, dan semakin komplek kebutuhan ini menyebabkan kita kehilangan manfaat fungsi yang kita buat. Fungsi yang kita buat menjadi tidak re-usable lagi. Setiap saat kita harus merubah source code fungsi agar callback-nya sesuai harapan dan lain sebagainya.

Promise

Promise bisa menjadi alternatif dari penggunaan callback. Promise memberikan fleksibilitas dan extensibilitas terhadap fungsi yang kita buat. Berbeda dengan callback, penggunaan promise memungkinkan kita untuk menciptakan sub-fungsi yang lebih spesifik sesuai kebutuhan tanpa harus merubah fungsi utamanya.


function get() {
    var d = $.Deferred();

    $.ajax({
        url: '...'
    }).done(function(v){
        d.resolve(v);
    }).fail(function(r){
        d.reject(r);
    });

    return d.promise();
}

get()
.then(
    function(value){
        console.log(value);
        return Math.pow(value,2);
    }
)
// ekstensible
.then(
    function(power){
        console.log(power);
    }
)

Advertisements