Janji Javascript

Menurut MDN (Mozilla Developer Network), Javascript Promise adalah "object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value". Kasarnya begini, javascript promise adalah suatu objek yang NANTINYA akan menghasilkan suatu value (resolved), pun kelak belum tentu sukses (rejected).

Sama hal dengan sebuah janji di kehidupan nyata, seseorang bisa menjanjikan sesuatu meskipun orang tersebut belum memiliki apa yang dijanjikan. Sebagai contoh, Ibu Budi menjanjikan membelikan mainan baru hanya apabila Budi mendapatkan nilai diatas 85 pada ulangan matematika.

Promise memiliki beberapa state yaitu ;

• pending: keadaan dimana promise pertama kali dibuat.
• fulfilled: operasi sukses diselesaikan.
• rejected: operasi gagal.

Saya coba mengimplementasikan contoh sederhana promise "Ibu Budi" diatas dalam bentuk javascript ;

pada kode diatas saya memiliki dua promise yaitu janjiMainanBaru() dan bermain(),  janjiMainanBaru() bertugas mengembalikan janji yang berupa objek apabila nilai Budi diatas 85, sedangkan bermain bertugas mengkonsumsi objek tersebut dan mengembalikan sebuah string.

Promise dibentuk dengan menggunakan keyword new, Setiap Promise memiliki executor yang merupakan sebuah fungsi dimana fungsi tersebut memiliki dua argumen yaitu resolve dan reject. resolve di eksekusi sesaat setelah sebuah tugas telah selesai dan menghasilkan suatu value, sedangkan reject dipanggil apabila tugas tersebut gagal dilaksanakan. akan tetapi pada bermain(), hanya didapati sebuah method Promise.resolve() yang berarti promise tersebut akan selalu menghasilkan sebuah value apabila dieksekusi. (nb : selalu sertakan resolve dan reject walaupun optional demi kenyamanan bersama, karena ECMAScript masih terus berkembang dan mungkin saja kedepannya akan berstatus deprecated, diatas hanyalah sebuah contoh ).

Berikut ini akan membingungkan dan agak sulit untuk dijelaskan apalagi pada level perjavascriptan saya sekarang. Tapi, mari kita cermati dengan seksama syntax .then berikut ;

p.then(onFulfilled[, onRejected]);

p.then(function(value) {
  // fulfillment
}, function(reason) {
  // rejection
});

Pada mintaIbu() dapat kita lihat memiliki method .then dan .catch didalamnya. .then() akan mengembalikan atau menghasilkan sebuah promise (penting), .then juga meminta dua callback function yaitu onFulfilled dan onRejected (optional),  onFulfilled akan dipanggil jika promise terpenuhi (fulfilled), lalu value didalam fulfilled apa, dong ? value didalam fulfilled yaitu sama persis value yang kita pass dari resolve(), sedangkan .catch hanya peduli dengan penolakan suatu promise. mekanisme .catch sama persis dengan .then . hhmmmmm oke ini membingungkan. tidak apa - apa bingung, itu indikasi bahwa kita belajar.

Oke lanjut, Promise is chainable, yang artinya promise dapat disambung - sambung dengan method .then dan .catch diatas (mindblowing, I know), lihat snippet kode berikut ;

let mintaIbu = function () {

janjiMainanBaru(nilai)

.then(bermain)

.then(function (p) {

console.log(p)

}).catch(function (reason) {

console.log(reason)

})

}

Karena .then mengembalikan sebuah promise, maka promise dapat disambung - sambung dengan promise lainnya, dan .catch bertugas untuk menampilkan error yang dihasilkan dari reject().

Mungkin dengan contoh diatas akan terlihat sepele, tapi coba kita bayangkan jika kita membuat banyak asynchronous API request dan menghandle data tersebut dengan menggunakan cara old school yaitu callback function, mungkin kode kita akan terlihat kurang lebih seperti ini ;

kode diatas disebut callback hell, dari namanya saja sudah ngeri, tidak ada yang mau masuk neraka kan disini ? maka bertaubatlah! dan mulai gunakan Promise.

Jika ada kesalahan pada penulisan kode atau apapun dalam postingan saya silahkan berikan komentar, karena posisi saya disini juga masih belajar. Terimakasih. 👌