Mari kita ingat ingat kembali yah tentang built-in function ini
Klik di siniMari kita lihat kembali tentang nested callback ini
Klik di siniBagaimana perasaannya membuat callback?
Membagongkan bukan?
Apalagi pas nested callback khaque
Nah sekarang mari kita coba memperingan masalah dengan teknik baru !
Berjanji untuk melakukan sesuatu yang tidak diketahui akan diselesaikan kapanPromise merepresentasikan operasi atau aksi yang belum diselesaikan sekarang, tapi akan diselesaikan nanti di masa depan dan bersifat asynchronous.Mari kita lihat kondisi Janji di dunia nyata
Janji: Saya tidak akan marah ketika menonton Layangan PutusJanji diuji: Ketika saya menonton Layangan PutusJanji terpenuhi: Ketika nonton tidak emosiJanji ditolak: Ketika nonton emosi dan banting meja gara gara pelakorMari kita lihat Promise dalam ES6
Beberapa kondisi atau state dalam Promise:
pending - Merupakan kondisi awal, ketika kita membuat Promise, belum terpenuhi / ditolakfulfilled - Merupakan kondisi di mana Promise sudah terpenuhirejected - Merupakan kondisi di mana Promise gagal terpenuhiBagaimana cara membuat promise?
// Deklarasi Promise
const sebuahJanji = new Promise((resolve, reject) => {
// Sebenarnya resolve dan reject ini adalah CALLBACK !
// baik resolve dan reject ini hanya menerima satu parameter.
// bila terjadi error (err)
if("bila terjadi error") {
// Kembalikan reject dengan error
reject("message error yang ingin diberikan");
}
// bila success (fulfilled)
// kembalikan resolve dengan nilai yang diharapkan (data)
resolve("data kembalian sukses");
});// Menggunakan promise berdasarkan kode yang dibuat sebelumnya
sebuahJanji
// Apabila promise berhasil (resolved)
.then(
// masih ingat yah resolve("data kembalian sukses")
// resolve = fnCallback, "data kembalian sukses" = data
(data) => {
// lakukan logic ketika promise berhasil
}
)
// Apabila promise gagal (rejected)
.catch(
// masih ingat yah reject("message error yang ingin diberikan")
// reject = fnCallback, "message error yang ingin diberikan" = err
(err) => {
// lakukan logic ketika promise gagal
}
)Mari kita lihat contoh penggunaan promise sederhana
const janjiPertamaKu = new Promise((resolve, reject) => {
// Di sini karena tidak ada kondisi gagal, maka reject tidak digunakan
setTimeout( () => {
resolve("Hore Janjiku Berhasil !");
}, 250);
});
// Cara pakai Promisenya
// Di sini tidak invoke, karena bukan fungsi
janjiPertamaKu
// Apabila janji berhasil
.then((dataHasilResolve) => {
// Logic ketika janji berhasil
console.log(dataHasilResolve);
});
// Karena tidak ada reject, jadi tidak perlu menggunakan catchPromise yang tidak bisa menerima parameterPromise dalam sebuah fungsi !Contoh deklarasi Promise dibungkus fungsi
// Mis: kita ingin membuat fungsi untuk menggabungkan kata yang diberikan
const gabungKata = (kataYangInginDigabung) => {
// Hasil akhir dari fungsi ini adalah dengan
// mengembalikan Promise
return new Promise((resolve, reject) => {
// Kondisi gagal (rejected)
if(kataYangInginDigabung === null) {
reject("Maaf, katanya Error !");
}
// Kondisi terpenuhi (resolved)
else {
resolve(kataYangInginDigabung);
}
});
};Contoh penggunaan Promise dibungkus fungsi
// Cara menggunakan fungsi gabungKata (Promise)
gabungKata("Hello")
// Kondisi berhasil (resolved)
.then(
// fnCallback resolve
(dataHasilResolve) => {
console.log(dataHasilResolve);
}
)
// Kondisi gagal (rejected)
.catch(
// fnCallback reject
(rejectMessage) => {
console.log(rejectMessage);
}
);Masih belum terlihat yah enak-nya promise?
Mari kita coba lihat kode Promise yang berlapis
Mari kita coba selesaikan masalah tersebut dengan Promise
Kode untuk promise chaining dapat dilihat di sini
Kok sepertinya... itu seperti callback hell yah?
Karena kita menggunakannya salah, terjadilah Promise Hell
Lalu solusinya bagaimana?
Mari kita coba lihat kode berikut yah di sini
Kok sepertinya... masih ada yang aneh yah?
Promise yang di-return bisa langsung masuk ke .then()
Fungsi gabungKata sudah Promise ... jadi seharusnya bisa seperti ...
Mari kita coba lihat kode penyelesaiannya berikut yah di sini
Wah jadinya pendek !
Psst... ternyata ada loh yang lebih pendek lagi dari Promise, namanya adalah async / await
Mari kita lihat cara penulisannya dengan melihat kode fs Promises dan versi async / awaitnya di sini
Setelah melihat cara penulisannya, mari kita selesaikan permasalahan gabungKata dengan versi async / await
Yuk lihat kodenya di sini
Jadi sependek itu !?
Pembelajaran hari ini: Pergunakan cara async / await sebisa mungkin !