Serial ES6 – Promise

posted in: Blog, Javascript | 1

Promise merupakan cara mudah untuk mengelola operasi asynchronous seolah-olah menjadi synchrounous. Apakah perlu? yes, karena synchronous lebih mudah dipahami bila kita membaca suatu kode. Sebelumnya developer javascript menggunakan callback untuk menghandle operasi asynchrounous, akan tetapi cara ini cepat atau lambat akan menyebabkan kode kita menjadi susah dibaca, susah dikelola. Hal yang paling sering terjadi adalah callback hell. Mari kita lihat contoh callback terlebih dahulu sebelum membahas promise, agar kita tahu keunggulan promise dibandingkan callback.

Perhatikan snippet kode di atas, kode tersebut hanyalah fiktif belaka, namun menggambarkan bagaimana penggunaan callback yang menyebabkan kode kita lambat laun semakin menjorok ke dalam (perhatikan yang saya tandai dengan segitiga merah). Hal tersebut jika dibiarkan akan semakin menjorok bila kita ingin menambahkan operasi asynchrounous lainnya. Inilah yang sering orang keluhkan, umumnya disebut callback hell atau pyramid of hell.

Coba bandingkan dengan ilustrasi di bawah ini, kode di bawah ini memiliki tujuan yang sama dengan kode snippet sebelumnya, akan tetapi diilustrasikan menggunakan promise. Jelas perbedaanya? Kode snippet di bawah menjadi lebih mudah dibaca, tidak ada lagi pyramid of hell. Alur bacanya pun jelas, dari atas ke bawah. Menggambarkan urutan / langkah-langkah operasi signup.

contoh-promise

Jika kalian cermati ada tiga method promise yang kita pakai di snippet di atas, yaitu then, always dan catch. Umumnya promise based library mensupport tiga method dasar tersebut. Baik mari kita bahas satu per satu 3 method di itu.

then

Jika diterjemahkan then ke bahasa indonesia then artinya kemudian, maksudnya, setelah operasi dijalankan, kemudian lakukan apa? berhenti? atau lakukan operasi lainnya. Jika click selesai, then saveDB then sendMail dst;
the tidak akan dipanggil jika terjadi error pada operasi sebelumnya. Misal click berhasil, lalu saveDB ternyata gagal, maka sendMail tidak akan dipang

always

always berarti selalu, sangat simple untuk dipahami. Artinya operasi yang kita masukan kedalam parameter method ini selalu dijalankan, baik operasi sebelumnya gagal (error) ataupun berhasil. Contohnya enableButton akan selalu dipanggil baik operasi saveDB berhasila atau tidak.

catch

catch kebalikan dari then, hanya akan dipanggil ketika terjadi error. Sementara jika operasi berhasil semua makan catch tidak akan pernah dipanggil.
Kenapa namanya catch? karena kita ingin menangkap error jika terjadi kegagalan. Bisa untuk logging atau menginformasikan ke user gagal karena alasan apa.

ES6 promise sendiri mengimplementasikan spec yang disebut Promise/A+. Dan banyak library promise di javascript yang juga mengimplementasikan spec tersebut antara lain, Q, Bluebird, RSVP dan lain-lain. Jadi sekarang kamu sudah paham apa itu promise di ES6 bukan, sekarang kamu bisa mencobanya, dan silahkan pilih mau pake library yang mana.

Follow Muhammad Azamuddin:

Latest posts from