Promise, onFulfilled, onRejected Functions and onRejected with Catch Method
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
/*
Promise biasa digunakan untuk kode yang berjalan secara asynchronous dan
saling bertegantungan.
Promise memiliki perilaku yang sama dengan analogi yang digambarkan tadi.
Dalam promise terdapat 3 (tiga) kondisi, yakni:
Pending (Janji sedang dalam proses)
Fulfilled (Janji terpenuhi)
Rejected (Janji gagal terpenuhi)
Lantas bagaimana cara membuat janji (Promise) di JavaScript?
Untuk membuat objek promise, kita gunakan keyword new diikuti dengan
constructor dari Promise dan di dalam constructor Promise kita perlu
menetapkan resolver function atau bisa disebut executor function
di mana fungsi tersebut akan dijalankan secara otomatis ketika
constructor Promise dipanggil, contoh:
*/
const executorFunction = (resolve, reject) => {
const isCofeeMakerReady = false; //true/false adalah kondisi mesin coffe nya
if(isCofeeMakerReady){
resolve("Selamat menikmati, Kopi berhasil dibuat");
}else{
reject("Mohon Maaf, mesin kopi sedang tidak bisa digunakan!");
}
};
/* Executor function dapat 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,
biasanya kita gunakan untuk mengirimkan data ketika promise berhasil
dilakukan. Ketika fungsi ini terpanggil, kondisi Promise akan berubah
dari pending menjadi fulfilled.
+ reject() merupakan parameter kedua pada executor function.
Parameter ini merupakan fungsi yang dapat menerima satu parameter
yang digunakan untuk memberikan alasan mengapa Promise tidak dapat
terpenuhi. Ketika fungsi ini terpanggil, kondisi Promise akan berubah
dari pending menjadi rejected.
Executor function akan berjalan secara asynchronous hingga akhirnya
kondisi Promise berubah dari pending menjadi fulfilled/rejected.*/
/* membuat objek promise, gunakan keyword new diikuti dgn constructor
dari Promise */
const makeCofee = new Promise(executorFunction);
console.log(makeCofee);
/*Dari output yang dihasilkan baik ketika fulfilled ataupun rejected
masih berupa Promise, bukan nilai yang dibawa oleh fungsi resolve atau reject
itu sendiri.
Untuk menangani nilai yang dikirimkan oleh resolve() ketika
Promise onFulfilled, kita gunakan method .then() pada objek promise
yang kita buat. Lalu di dalam method .then() kita berikan parameter berupa
function yang berguna sebagai handle callback.
Contohnya seperti ini:
*/
const handlerSuccess = resolvedValue => {
console.log(resolvedValue);
};
const handlerRejected = rejectionReason => {
console.log(rejectionReason)
}
makeCofee.then(handlerSuccess, handlerRejected);
/* Penjelasan utk kondisi onFulfilled:
+ makeCoffee merupakan objek promise yang akan menghasilkan resolve()
dengan membawa nilai ‘Kopi berhasil dibuat’.
+ Lalu kita mendeklarasikan fungsi handlerSuccess() yang mencetak nilai
dari parameternya.
+ Kemudian kita memanggil method .then() dari makeCoffee dan memberikan
handlerSuccess sebagai parameternya.
+ Ketika makeCoffee terpenuhi (fulfilled), maka handlerSuccess() akan
terpanggil dengan parameter nilai yang dibawa oleh resolve().
Sehingga output akan menghasilkan “Kopi berhasil dibuat”.
Penjelasan utk kondisi onRejected:
+Mendeklarasikan fungsi handlerRejected sperti diatas
Kita dapat menyimpan kedua handle callback baik onFulfilled atau onRejected
pada parameter method .then(), yang perlu kita perhatikan adalah
pastikan handle callback untuk onFulfilled disimpan pada parameter
pertama seperti ini:
makeCoffee.then(handlerSuccess, handlerRejected);
Dengan begitu kita tetap dapat menangani objek promise meskipun dalam
kondisi rejected.
*/
function br(){
console.log("");
}
/* Separation of concerns yang artinya pemisahan masalah.
Pemisahan masalah berguna utk mengorganisasikan kode ke dalam bagian2 yang
berbeda berdasarkan tugas tertentu. Hal ini akan memudahkan kita kelak mencari
kode yang salah jika aplikasi tidak bekerja dengan baik.
.then() akan mengembalikan nilai promise yang sama dengan ketika objek
promise itu dipanggil. Melalui sifatnya ini, daripada kita menetapkan
logika resolve dan reject pada satu method .then(), kita dapat memisahkan
kedua logika tersebut menggunakan masing-masing method .then()*/
br();
makeCofee
.then(handlerSuccess)
.then(null, handlerRejected);
/* Namun untuk menetapkan rejected handler kita perlu memberikan nilai null
pada parameter method. then().terlihat sedikit merepotkan karena kita
perlu memberikan nilai null pada parameter method .then() diatas.
Solusinya kita bisa menggunakan .catch() method. .catch() method hanya
akan terpanggil bilamana objek promise memiliki kondisi onRejected.
contoh:
*/
makeCofee
.then(handlerSuccess)
.catch(handlerRejected);
/* lihat, kita ridak perlu menggunakan null pada parameter seperti saat
menggunkana method .then() */
JavaScript
INFO