Pada artikel sebelumnya kita telah belajar tentang Asynchnous pada javascript, tak lengkap rasanya apabila kita belum paham tentang Promise.
Apa itu promise ๐ค?
Promise merupakan salah satu fitur yang penting dari ES6. Objek promise mewakili penyelesaian atau sebuah kesalahan pada operasi Asynchronous, Promise bahkan mampun menggantikan peran dari callback yang telah kita pelajari pada artikel sebelumnya dengan menggunakan fungsi khas nya yaitu .then. Tapi kenapa fitur ini di namakan ‘’Promise’’ ?
Fitur ini seperti namanya yang berarti “Janji”. dalam contoh kasus sederhana nya, Misal kita memesan sebuah makanan pada pelayan restoran, secara tidak langsung pelayan berjanji mengantarkan pesanan tersebut bila pesanan tersedia, akan tetapi janji tersebut bisa tidak terpenuhi apabila kondisinya tidak memungkinkan contoh nya, makanan yang di pesan tidak tersedia/habis.
Sama seperti contoh di atas promise juga berlaku demikian, Promise memiliki 3 status, yaitu:
- pending: Janji sedang proses (belum terpenuhi dan belum gagal)
- fulfilled: Berarti janji telah sukses terpenuhi.
- rejected: Berarti janji gagal di diselesaikan.
Lalu bagaimanakah cara membuat Promise pada JavaScript?
Membuat Promise ๐ค๐ป
Untuk membuat sebuah objek promise, kalian dapat menggunakan keyword new diikuti dengan constructor dari promise:
const hello = new Promise();
Namun, jika hanya menuliskan kode seperti diatas akan mengakibatkan error.
Untuk mengatasi hal tersebut kalian perlu menetapkan resolver function di dalam constructor promise atau bisa juga disebut dengan executor function dimana fungsi tersebut akan diajalankan secara otomatis ketika constructor Promise di panggil.
const executorFunction = (resolve, reject) =>{
const isCoffeMachineReady = true
if (isCoffeMachineReady){
resolve('Kopi berhasil di buat');
}else{
reject('Mesin kopi tidak dapat di gunakan!');
}
};
const buatKopi = new Promise(executorFunction);
console.log(buatKopi)
Jika program dijalankan maka outputnya:
Executor function memiliki dua parameter, yang berfungsi sebagai resolve() dan reject() function. Berikut penjelasan detailnya:
- resolve(): merupakan parameter pertama pada executor function. Parameter ini merupakan fungsi yang dapat menerima satu parameter, biasa digunakan untuk mengirim data ketika promise/janji telah terpenuhi. Ketika fungsi ini di panggil, kondisi pada promise akan berubah dari pending menjadi fullfilled .
- reject(): merupakan perameter kedua pada executor function. Parameter ini merupakan fungsi yang dapat menerima satu parameter yang digunakan untuk menampilkan pesan mengapa promise tidak dapat terpenuhi. Ketika fungsi ini dipanggil, kondisi promise akan berubah dari pending menjadi rejected.
Executor function akan berjalan secara asynchronous hingga pada akhirnya kondisi promise berubah dari pending menjadi fullfiled/rejected.
Pada potongan kode sebelumnya, memiliki output sebagai berikut:
Promise {'Kopi berhasil di buat'}
Mengapa demikian? Ketika executor function mengeksekusi resolve() dengan membawa data string “Kopi berhasil di buat”. Coba kalian ubah nilai pada variabel isCoffeMachineReady menjadi false , maka executor function akan mengeksekusi reject() dengan membawa pesan rejection “*Mesin kopi tidak dapat di gunakan!”**.
Promise { <rejected> 'Mesin kopi tidak dapat di gunakan!' }
Dari output ketika kondisi fulfilled (terpenuhi) maupun rejected (ditolak) masih berupa Promise, bukan nilai yang di bawa dari fungsi resolve atau reject itu sendiri. Lantas bagaimana cara untuk mengakses nilai yang dibawa oleh fungsi-fungsi tersebut? cara yang dapat kalian coba adalah menggunakan method .then() yang tersedia ****pada obejek Promise.
Fungsi onFulfilled✅ dan onRejected❌
Untuk menangani nilai yang dikirim oleh resolve() ketika Promise onFullfilled, kita gunakan metode .then() pada objek promise yang telah kita buat. Lalu pada metode .then() dapat kalian berikan sebuah parameter berupa fungsi yang berguna sebagai handle callback, Perhatikan potongan kode dibawah ini:
const executorFunction = (resolve, reject) =>{
const isCoffeMachineReady = true
if (isCoffeMachineReady){
resolve('Kopi berhasil di buat');
}else{
reject('Mesin kopi tidak dapat di gunakan!');
}
};
const handlerSuccess = resolvedValue => {
console.log(resolvedValue);
}
const buatKopi = new Promise(executorFunction);
buatKopi.then(handlerSuccess)
Jika di jalankan maka outputnya:
Mari kita pahami potongan kode diatas:
- buatKopi merupakan objek promise yang akan menghasilkan resolve() dengan membawa data string “Kopi berhasil di buat”.
- Lalu kalian membuat fungsi handlerSuccess() yang mencetak nilai dari parameternya.
- Kemudian kalian memanggil metode .then() pada buatKopi dan memberikan handlerSuccess() sebagai parameternya.
- Ketika buatKopi fulfilled (terpenuhi), maka handlerSuccess() akan terpanggil dengan parameter nilai yang dibawa dari resolve(). Sehingga outputnya akan menghasilkan “Kopi berhasil di buat”.
Tapi bagaimana jika objek dari promise menghasilkan kondisi rejected? Bagaimana cara menangani nilai yang di kirim dari reject()?
Kalian dapat menyimpan kedua handler callback baik onFullfilled(Terpenuhi) atau onRejected(Ditolak) pada parameter metode .then(), yang harus kalian perjhatikan adalah memastikan handle callback disimpan dalam parameter pada urutan pertama seperti contoh berikut :
buatKopi.then(handlerSuccess, handlerRejected);
Dengan demikian kita dapat menangani objek promise dalam kondisi rejected.
Berikut contoh kode dengan handlerRejected:
const executorFunction = (resolve, reject) =>{
const isCoffeMachineReady = false
if (isCoffeMachineReady){
resolve('Kopi berhasil di buat');
}else{
reject('Mesin kopi tidak dapat di gunakan!');
}
};
const handlerSuccess = resolvedValue => {
console.log(resolvedValue);
}
const handlerRejected = rejectedValue =>{
console.log(rejectedValue);
}
const buatKopi = new Promise(executorFunction);
buatKopi.then(handlerSuccess, handlerRejected);
Pada kode diatas kita telah ubah nilai dari isCoffeMachineReady menjadi false.
Apabila kode dijalankan maka outputnya:
Baik mungkin sekian dulu artikel kali ini semoga bermanfaat ๐❤️