Course Pengenalan JavaScript Promise ini adalah introduksi dari Object Promise. Dibahas karena service worker menggunakan Promise. Tujuan dari course ini adalah memahami cara menggunakan promise dan logika dibelakang promise.
Pendahuluan
JavaScript bekerja pada single thread, artinya hanya ada 1 kode berjalan pada satu waktu; kode akan dijalankan satu per satu. Di browser, JavaScript berbagi thread, biasanya JavaScript berada dalam antrian yang sama dengan painting, memperbarui style, dan menangani tindakan pengguna (seperti menyorot teks dan berinteraksi dengan kontrol formulir). Aktivitas yang memakan waktu akan menunda aktivitas yang lain.
Sebelum promise, ada pendekatan dengan callback. Namun callback yang rumit akan sulit dibaca oleh programmer dikemudian hari
Jadi JavaScript Promise adalah object event yang menunjukan suatu proses asynchronous berhasil atau gagal, serta mengembalikan value.
Artinya, ketika Promise dibuat, kita tidak tahu apakah proses tersebut berhasil atau tidak, dan return value belum diketahui. Tujuannya adalah kita bisa melanjutkan baris program yang lain tanpa harus menunggu proses sebelumnya selesai.
Promise State
Promise memiliki state sebagai berikut
- pending: state awal, sebelum menjadi fullfilled atau rejected.
- fulfilled: operasi selesai dan berhasil.
- rejected: operasi gagal.
Promise dapat mencapai fullfiled dengan return value, atau rejected dengan reason error.
Promise Fullfiled / Resolve
Untuk mengakses promise fullfiled, digunakan metoda then.
var promise1 = new Promise(function(resolve, reject) {
//disini digunakan set timeout untuk menunjukan asycnh process
setTimeout(function() {
resolve('resolved');
}, 300);
});
promise1.then(function(value) {
console.log(value);
});
console.log(promise1);
> [object Promise]
> "resolved"Promise Rejected
Untuk mengakses rejected promise, digunakan metoda catch.
var promise1 = new Promise(function(resolve, reject) {
//disini digunakan set timeout untuk menunjukan asycnh process
setTimeout(function() {
reject ('rejected');
}, 300);
});
promise1.catch(function(value) {
console.log(value);
});
console.log(promise1);
> [object Promise]
> "rejected"Chaining Promise
Chaining adalah cara mengakses promise, dimana kita bisa menumpuk metoda then atau catch pada handler promise.
var promise1 = new Promise(function(resolve, reject) {
//disini digunakan set timeout untuk menunjukan asycnh process
setTimeout(function() {
reject ('rejected');
}, 300);
});
promise1.then(function(value) {
console.log(value);
}).catch(function (value){
console.log(value);
});
console.log(promise1);
> [object Promise]
> "rejected"JIka Anda ingin memahami lebih detail tentang Promise silakan click
Contoh Promise Pada Service Worker
Pada file app.js, fungsi serviceWorker.register adalah contoh penggunaan promise pada service worker.
if ('serviceWorker' in navigator){
navigator.serviceWorker.register('\sw.js')
.then(function(){
console.log('Service Worker Registered.');
});
}
Anda bisa menambahkan fungsi catch untuk menangani error, walaupun sangat jarang terjadi error saat melakukan registrasi serviceWorker.
if ('serviceWorker' in navigator){
navigator.serviceWorker.register('\sw.js')
.then(function(){
console.log('Service Worker Registered.');
})
.catch(function(){
console.log('Service worker reg error.');
});
}