Panduan Komplit Asynchronous Programming pada Javascript — Part #3 Promise
Pada seri sebelumnya saya membahas callback untuk menangani proses synchronous maupun asynchronous. Pada seri ini saya akan membahas tentang promise sebagai alternative untuk callback.
Topik bahasan pada seri ini :
- Apa sih itu Promise ?
- Callback vs Promise
- Membuat & Menggunakan Promise
- Request Ajax dengan Fetch
- Promise Chaining
- Promise All
- Promise in looping
- Promise Race
- Library Promise
1. Apa sih itu promise ?
Promise adalah salah fitur terbaru dari ES6. Jika anda sebelumnya sudah pernah menggunakan .then maka anda sudah menggunakan promise. Mari kita mulai dari analogi sederhana. Anda janjian ketemuan dengan salah satu kolega anda, tiba-tiba kolega tersebut bertanya anda sudah dimana ? Ada beberapa kemungkinan jawaban disini : dalam perjalanan, sudah sampai atau janjinya di batalkan.
Dalam dunia promise analogi di atas juga sama, ketika melakukan request asynchronous seperti Ajax, maka ada 3 kemungkinan state :
- Pending ( sedang dalam proses )
- Fulfilled ( berhasil )
- Rejected ( gagal )
Lalu bagaimana implementasinya dalam javascript ? Untuk sekarang ingat saja bahwa promise itu adalah object. Object yang merepresentasikan state diatas.
2. Callback vs Promise
Promise umumnya digunakan sebagai alternative callback. Salah satu tantangan di callback adalah callback hell. Disebut neraka ketika ada callback didalam callback didalam callback lagi dan di dalam callback lagi. Problemnya adalah kode sulit dibaca dan penanganan error nya juga menjadi sulit. Disaat seperti ini maka promise menjadi solusi.
Sebelum mendalami promise sebaiknya pahamilah terlebih dahulu konsep callback. Promise bukan untuk menggantikan callback, karena promise akan selalu berjalan asynchronous sedangkan callback bisa digunakan untuk synchronous maupun asynchronous. Benefit utama dari promise adalah membuat code lebih readable dan manajemen error yang lebih baik.
Beberapa hal penting perbedaan callback dan promise adalah :
- Callback adalah function sedangkan promise adalah object.
- Callback di kirim melalui parameter, sedangkan promise mengembalikan object
- Callback digunakan untuk menghandle succes dan failure,sedangkan promise tidak
- Callback dapat digunakan untuk beberapa event sekaligus, sedangkan promise hanya untuk satu event
2. Membuat & Menggunakan Promise
Masih ingat dengan 3 state yang kita bahas sebelumnya ? Pending, Fulfilled, Reject.
Untuk membuat promise cukup dengan memanggil constructor nya :
Sampai disini output dari code atas adalah Promise { <pending> }
Lalu bagaimana untuk mengatur state Fullfilled dan Reject ?
Untuk state ini gunakan salah satu listener, resolve() atau reject()
Untuk menggunakan promise diatas gunakan method then dan catch
Output dari code diatas ada 2 kemungkinan,
- Jika comment pada resolve( ) di hapus maka hasilnya “berhasil”
- Jika comment pada reject( ) di hapus maka hasilnya “Janji di batalkan”
3. Request Ajax dengan Fetch
fetch adalah API yang di perkenalkan sejak ES6, untuk melakukan request ajax. Berikut boilerplate untuk penggunaan fetch.
Mari kita coba request ke API public.
Ouput dari code diatas json data user.
Tapi kenapa method .then di panggil 2 kali ?
Hal ini sering membuat bingung, apalagi bagi yang pertama kali mencoba fetch.
- Response fetch pada #1 hasilnya adalah object Response, untuk lebih detailnya adan bisa lihat disini. Untuk mendapat response dalam bentuk json() maka digunakan method Body.json()
- Hasil dari method Body.json() dibaca pada #2. Selain json kita juga menerima respon dalam format plain text menggunakan method Body.text()
4. Promise Chaining
Seperti namanya promise chaining berarti promise berantai. Berikut contoh kasus untuk menampilkan post dengan alur seperti berikut :
- request post
- request author berdasarkan Id post
- request comment berdasarkan Id post
- tampilkan hasil
dalam bentuk pseude-code kira-kira seperti ini :
Berikut source code lengkapnya :
Wow Kode diatas terlihat sexy bukan ?
oke sebentar, biar seger mari ngopi dulu
Jika dirasa kode diatas sulit dibaca, mari kita per simple lagi dengan cara seperti berikut :
5. Promise.all
Promise.all sedikit lebih mudah, Cara kerjanya adalah menunggu hingga semua eksekusi promise selesai dan menghasil output dalam bentuk array. Sebagai contoh untuk kasus diatas menggunakan dengan Promise.all
6. Promise in Looping
Salah satu kasus menarik di promise adalah mengeksekusi beberapa promise dalam looping sesuai urutan. Untuk memproses promise dalam looping, gunakan array.map dan Promise.all
7. Promise.race
Berbeda cara eksekusi promise sebelumnya. Promice.race hanya menghasilkan promise yang lebih dulu selesai. Sebagai contoh kasus mari kita ambil contoh olahraga kegemaran kita semua yaitu balap karung.
Output : Balapan selesai,Pemenangnya adalah: Peserta 2.
Tapi bagaimana kalau satu peserta terjatuh ? ( ada promise yang reject )
Output : Balapan dihentikan karena : Peserta 2
Seharusnya jika peserta 2 terjatuh maka pemenang adalah peserta 1, tapi karena jiwa mereka ini sangat nasionalis terpaksa balapan dihentikan.
Tapi karena kebetulan ini adalah pertandingan piala dunia balap karung, peraturan balapnya di ubah. Pertandingan tetap dilanjutkan meskipun ada peserta yang terjatuh.
Untuk ini method promise di extend untuk mendeteksi promise yang reject.
Output :
Peserta 2 terjatuh,ahh sudahlah lanjutkan saja
Balapan selesai,Pemenangnya adalah: Peserta 1
8. Library Promise
Semua fungsi promise yang di gunakan disini menggunakan standar ES6, jika anda ingin mengeksplor lebih dalam lagi tentang promise atau fitur promise standar belum cukup, anda bisa mencoba library-library promises yang menawarkan fitur yang lebih banyak seperti Bluebird,Q, RSVP, Catiline dan masih banyak lagi.
Terimakasih semoga bermanfaat. Jika ada pertanyaan dan saran, silahkan post di comment box dibawah. Sampai jumpa seri async programming selanjutnya.
Artikel ini adalah bagian dari Seri Panduan Komplit Asynchronous Programming pada Javascript :
- Intro
- Callback
- Promise
- Async/await
- Generator (coming soon)
