Promise
Promise
tanpa menunggu perintah sebelumnya selesai dikerjakan. Nah pasti banyak dari kalian tidak
menyadari hal ini atau ada yang sadar tapi tidak memperdulikannya hehe.
sumber: programering
Dari ilustrasi diatas sudah jelas perbedaan asynchronous dan synchronous dalam mengeksekusi
perintah, yaa gampangnya kalau synchronous proses eksekusi dilakukan secara bergantian
sementara asynchronous dilakukan secara bersamaan.
Ok sebagai bukti silahkan salin kode dibawah ini dan jalankan pada browser kalian masing -
masing.
setTimeout(function() {
console.log("Hello World 1");
}, 200);
Setelah kalian jalankan hasilnya pasti "Hello World 2" lalu diikuti dengan "Hello World 1". Nah
dari pembuktian code diatas sudah jelas bahwa Javascript tidak menunggu proses setTimeout
sampai selesai melainkan melanjutkan ke proses selanjutnya sambil menunggu proses 1 selesai.
Promise
Setelah memahami bagaimana asynchronous programing bekerja, maka kalian tidak akan
kesulitan untuk memahami Promise ini. Saya akan jelaskan secara singkat, Promise bisa dibilang
sebuah executor yang ditugaskan untuk mengeksekusi code yang bersifat asynchronous menjadi
seakan - akan bersifat synchronous dengan kata lain mengubah cara pemrosesan suatu code
agar mendapatkan hasil yang diinginkan karena tidak semua proses bisa ditangani dengan teknik
asynchronous ini.
sintaks dasarnya adalah seperti berikut :
});
Ketika kita memanggil object Promise maka fungsi eksekutor akan dijalankan secara otomatis.
Kalau ditranslate kedalam bahasa Indonesia promise yang artinya janji maka apa yang akan
dilakukan apabila janji terpenuhi dan apa yang akan dilakukan jika janji tidak terpenuhi.
Dalam hal ini pada Promise apabila proses yang ada didalamnya berhasil maka fungsi resolve
akan dijalankan jika tidak maka reject yang akan dijalankan.
Contoh kita akan membuatkan Promise untuk kode Hello World tadi.
myPromise.then(function(success){
console.log(success);
console.log("Hello World 2");
});
Kira - kira kodenya seperti berikut. Karena sudah menggunakan Promise maka proses yang
dilakukan adalah menunggu proses setTimeout selesai selama 1 detik kemudian baru mencetak
tulisan "Hello World 1" dan "Helllo World 2".
Nah disini ada perbedaan mendasar dengan kode sebelumnya yang tanpa promise. Pada kode
sebelumnya tidak ada proses menunggu jadi sambil menunggu eksekusi akan dilanjutkan ke
proses selanjutnya.
Jika kalian perhatikan ada keyword then disana, keyword tersebut digunakan untuk menjalankan
perintah jika sebuah Promise berhasil sebaliknya jika gagal gunakan keyword catch ini mirip
seperti statement try catch.
Pemakaian Promise
Mungkin dari kalian menganggap bahwa Promise sama seperti ajax sayapun dulunya juga
beranggapan seperti itu. Tapi sebenarnya perbedaan antara keduanya sangat jauh berbeda
menurut saya.
Seperti yang kita tahu ajax adalah suatu teknik atau metode yang digunakan untuk membuat
HTTP request dari client.
Sementara Promise adalah menurut pengertian saya sebuah metode untuk menghandle proses
asynchronous.
Jadi sebuah Promise bukan berarti ajax maupun sebaliknya meskipun Promise erat kaitannya
dengan ajax request, sebab ketika kedua teknik ini disatukan maka akan menjadi sangat
powefull.
Contohnya bisa kita lihat pada library yang bernama axios. Sementara untuk library no ajax yang
menggunakan Promise yaitu localforage
setTimeout(function() {
console.log("Hello World 1");
}, 1000);
Update
Ok mumpung membahasan tentang promise maka sekalian saya akan
bahas async/await. async/await ini adalah sebuah keyword baru di Javascript lebih tepatnya ES7
yang digunakan bagi kalian yang sering bermain dengan Promise.
Async
Ok pertama kita bahas async terlebih dahulu. Setiap kita ingin membuat fungsi dengan return
value sebuah Promise maka kalian harus menggunakan class Promise tersebut seperti yang ada
dalam contoh sebelumnya. Nah dengan adanya async kita tidak perlu lagi memanggil object
Promise pada setiap fungsi cukup dengan tambahkan keyword async didepan nama fungsi maka
secara ototmatis fungsi yang kalian buat akan menghasilkan sebuah promise, walaupun dalam
fungsi tersebut kalian tidak menggunakan object Promise sama sekali.
Fungsi diatas akan menghasilkan Promise dengan hasil dari nilai a ditambah dengan b sebagai
nilai hasil, dan cara memanggil fungsinya seperti Promise pada umumnya.
Await
Ok sekarang kita bahas sahabatnya yaitu await, keyword await digunakan ketika kalian ingin
memanggil fungsi yang berupa Promise dan akan menunggu hasil dari Promise.
console.log(result);
}
f();
Nah bisa kalian perhatikan kode diatas, variabel result akan menunggu hasil Promise dari
variabel promise sementara jika variabel promise sudah resolve maka variabel result otomatis
akan terisi oleh hasil dari Promise tersebut.
Oh iya satu lagi syarat untuk menggunakan await ini adalah dia harus berada didalam fungsi
yang menggunakan async jadi await ini akan menghasilkan error apabila digunakan pada fungsi
biasa.