DEV Community: Guntur Poetra

Handle Async Promises Javascript

Guntur Poetra — Mon, 29 Apr 2019 19:20:56 +0000

Apabila anda telah terbiasa menggunakan callback pada saat mengolah code yang bersifat asynchronous, itu adalah hal yang bagus.

Callback

Sekilas mengenai callback, sudah cukup apabila hanya menghandle flow kode yang tidak terlalu kompleks.

Tetapi apa yang terjadi apabila jumlah baris kode anda sangat banyak, tentu saja akan menyulitkan pada saat mengorganisir dan debugging khususnya.

Kode diatas adalah contoh callback yang apabila semakin dalam subprosesnya (nested), maka kode akan semakin tidak rapi dan menyulitkan untuk mengorganisir kode. Kejadian seperti ini dikenal dengan istilah callback hell.

Promises

Promise (`then`)

Dengan adanya fitur promise, ini akan memudahkan kita dalam mengorganizir setiap potongan kode yang bersifat asynchronous.

Dari contoh diatas, kKita juga dapat membuat setiap potongan kode async menjadi pipeline yang tersusun rapi dan mudah untuk dibaca.

Async-Await

Jika contoh diatas menggunakan promise, pada contoh ini kita akan menggunakan async dan await keyword. Keyword async-await memberikan cara lain dalam mengekspresikan penulisan code program kita. Perhatikan contoh potongan berikut

Bisa kita perhatikan, ekspresi kode dengan menggunakan async-await lebih ringkas dan flow code-nya terlihat friendly.

Conclusion

Setelah melihat dan mengerti cara menulis promise ataupun async-await, kita dapat menulis kode program kita menjadi lebih mudah dibaca dan lebih mudah manage kode program kita.

Penulisan menggunakan promise atau async-await cukup relative bergantung dengan context dan case setiap masalah yang akan diselesaikan.

Terkait

Handle Async Callback Javascript

Guntur Poetra — Mon, 29 Apr 2019 19:17:36 +0000

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);
});

Contoh dengan menggunakan naming function.



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

cekTahun(tampilkanTahun);

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);

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

Memahami Synchronous dan Asynchronous Javascript

Guntur Poetra — Mon, 29 Apr 2019 19:13:32 +0000

Jika anda baru menggeluti bahasa pemrograman javascript, tentunya anda sering menemukan kode yang dieksekusi secara synchronous maupun asynchronous. Oke, kali ini kita sebut saja kedua istilah itu sync untuk synchronous dan async untuk asynchronous.

Process

Secara default, javascript diproses dalam baris perbaris, artinya setiap baris kode tidak akan dieksekusi sebelum baris kode sebelumnya selesai diproses. Semua proses akan ditampung dan dikenal dengan istilah call stack.

Synchronous

Synchronous (sync), merupakan mode default dalam proses eksekusi perintah kode. Perhatikan baris kode berikut



function tanyaKabar(name) {
    console.log('Apa kabar,', name);
}

function katakanHallo(name) {
    console.log('Hallo,', name);
}

katakanHallo('Guntur');
tanyaKabar('Gun');

Jika kita eksekusi kode diatas, maka pada layar console dibrowser anda akan muncul seperti gambar berikut

Sepertinya semua berjalan dengan baik, tidak ada yang aneh dan baik-baik saja. Hahaa.

Asynchronous

Jika pada sync, kode diproses baris perbaris, maka di async kode diproses secara baris perbaris juga. Hah..., maksudnya, lantas perbedaannya apa?

Dalam skenario-nya, sebenarnya kode async telah diproses, hanya saja sebatas penjadwalan untuk dieksekusi pada tahapan berikutnya. Artinya, kode yang berperilaku async tidak akan langsung dieksekusi, tetapi di skip dan akan melakukan eksekusi baris perintah berikutnya.



function tanyaKabar(name) {
    console.log('Apa kabar,', name);
}

function katakanHallo(name) {
    setImmediate(function () {
        console.log('Hallo,', name);
    });
}

katakanHallo('Guntur');
tanyaKabar('Gun');

Mari kita eksekusi kode diatas dan perhatikan hasilnya

Terlihat perbedaan pada urutan proses eksekusinya. Fungsi katakanHallo('Guntur') tidak langsung dieksekusi, sebab penerapannya menggunakan asynchronous dalam body fungsi katakanHallo.

Kapan Menggunakan Async?

Pemanfaatan async sangat berguna pada saat melakukan operasi-operasi yang tidak harus menunggu proses yang lainnya. Misalnya, memanipulasi DOM ketika melakukan proses ajax.

Agar bisa memahami, kita perlu mengetahui cara menghandle kode async tersebut dengan cara callback ataupun promises.

Kesimpulan

Yang perlu digarisbawahi adalah bagaimana cara kita untuk mengurutkan setiap baris-baris perintah agar dapat diproses dan dieksekusi sesuai tujuan.

Setiap kode yang akan dituliskan tidak selalu menggunakan synchronous ataupun asynchronous, itu selalu bergantung pada kebutuhan sebuah proses program.

DEV Community: Guntur Poetra

Handle Async Promises Javascript

Callback

Promises

Promise (then)

Async-Await

Conclusion

Terkait

Handle Async Callback Javascript

Kekeliruan Umum Mengolah Asynchronous

Terkait

Memahami Synchronous dan Asynchronous Javascript

Process

Synchronous

Asynchronous

Kapan Menggunakan Async?

Kesimpulan

Terkait

Promise (`then`)