Promise, onFulfilled, onRejected Functions and onR

Run Settings
LanguageJavaScript
Language Version
Run Command
/* 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() */
Editor Settings
Theme
Key bindings
Full width
Lines