Quick actions

cmd+k|ctrl+k

Navigation

Languages

Promise, onFulfilled, onRejected Functions and onRejected with Catch Method

Snippet info

Language

JavaScript

Visibility

public

Author

tulangrusuk.ku

Created

2020-08-05T11:39:30Z

Updated

2020-08-06T14:02:59Z

/*
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() */

INFO