Cara menggunakan PROMISW pada JavaScript
|
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. Show PendahuluanJavaScript 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 StatePromise memiliki state sebagai berikut
Promise dapat mencapai fullfiled dengan return value, atau rejected dengan reason error. Promise Fullfiled / ResolveUntuk 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);Promise RejectedUntuk 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);Chaining PromiseChaining 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);JIka Anda ingin memahami lebih detail tentang Promise silakan click
Contoh Promise Pada Service WorkerPada 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.');
});
}
Sobat jenius mungkin banyak yang tahu apa itu Javascript. Bahasa pemrograman ini merupakan bahasa pemrograman yang synchronous atau sederhananya pada bahasa pemrograman ini kita dapat menjalankan beberapa command/perintah pada saat yang bersamaan. Hal ini berbeda dengan beberapa bahasa pemrograman seperti PHP ataupun Python yang harus menjalankan perintah pada line teratas dulu, kemudian dilanjutkan dengan line di bawahnya. Walaupun Javascript memang dikenal dengan bahasa pemrograman yang synchronous, ada beberapa cara untuk sobat jenius gunakan jika ingin beberapa sintaks dijalankan secara asynchronous. Salah satu cara yang bisa dipakai adalah dengan menggunakan Promise. Lalu bagaimana kita menggunakan Promise ini? Sobat jenius bisa perhatikan code di bawah ini. Pada code di atas dapat kita lihat bagaimana cara kita menggunakan Promise. Pada code tersebut variabel promise akan mengeluarkan nilai x jika nilai x + 2 lebih dari 2. Jika ternyata kurang dari sama dengan 2, maka akan dikeluarkan string berupa “x kurang dari 1”. Lalu apa bedanya dengan function biasa? Bedanya dengan function biasa adalah pada Promise, code yang berada di dalam then tidak akan pernah dieksekusi kecuali function Promise nya sudah mencapai resolve atau reject. Hal ini bisa mengurangi kemungkinan terjadinya error jika terdapat proses yang cukup lama untuk lanjut ke command selanjutnya. Maka dari itu, biasanya Promise digunakan untuk proses seperti menembak API atau download file.
Promise.all()Lalu bagaimana jika kita ingin menjalankan beberapa Promise secara asynchronous? Jawabannya yaitu dengan menggunakan Promise.all(). Berikut contoh code untuk Promise.all(). Pada code di atas dapat kita lihat bagaimana cara penggunaan Promise.all(). Pada variabel promises diisi beberapa Promise yang masing-masing isinya merupakan sebuah fetch API dengan id yang berbeda, sebagai info tambahan bahwa fungsi fetch di atas sudah merupakan bawaan dari javascript dan sudah asynchronous, sehingga bisa disamakan dengan fungsi Promise. Setelah dikumpulkan dalam variabel promises, variabel tersebut dimasukan ke dalam fungsi Promise.all(), sehingga Promise-Promise yang berada dalam promises bisa dijalankan secara berurutan. Setelah selesai, maka hasil yang dikeluarkan merupakan data dari API tersebut yang didapat secara berurutan dari 1 sampai 4. Berikut screenshot hasilnya Sekian penjelasan dari kami, semoga dapat menambah wawasan koding sobat jenius semua. Terima kasih. Apa Itu Promise di javascript?Sooo jadi promise adalah Sebuah mekanisme baru pada fitur javascript / ES6 yang merepresentasikan sebuah object request pengolahan data yang dilakukan secara asynchronous seperti ajax, dan promise ini mewakili sebuah operasi yang belum selesai, tetapi diharapkan di masa mendatang.
Apa itu callback function javascript?Callback pada Javascript adalah sebuah fungsi yang dikirimkan sebagai parameter fungsi lainnya. Fungsi diatas adalah sebuah contoh callback yang berjalan secara Synchronous karena fungsi callback langsung dieksekusi pada sebuah proses fungsi yang memiliki sifat synchronous.
Apa itu async function?Async sendiri merupakan sebuah fungsi yang mengembalikan sebuah Promise. Await sendiri merupakan fungsi yang hanya berjalan di dalam Async. Await bertujuan untuk menunda jalannya Async hingga proses dari Await tersebut berhasil dieksekusi.
Apa itu asynchronous Javascript?Async/await adalah fitur yang hadir sejak ES2017. Fitur ini mempermudah kita dalam menangani proses asynchronous.Async/Await merupakan sebuah syntax khusus yang digunakan untuk menangani Promise agar penulisan code lebih efisien dan rapih.
|
