0% menganggap dokumen ini bermanfaat (0 suara)
61 tayangan4 halaman

Promise

Javascript bersifat asinkron sehingga setiap perintah dieksekusi tanpa menunggu perintah sebelumnya selesai. Promise digunakan untuk mengubah cara pemrosesan kode asinkron menjadi sinkron dengan menunggu proses selesai sebelum melanjutkan. Async/await memudahkan penggunaan Promise dengan menambahkan keyword async pada fungsi dan menunggu hasil Promise dengan await.

Diunggah oleh

Zefi Dermawan
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
0% menganggap dokumen ini bermanfaat (0 suara)
61 tayangan4 halaman

Promise

Javascript bersifat asinkron sehingga setiap perintah dieksekusi tanpa menunggu perintah sebelumnya selesai. Promise digunakan untuk mengubah cara pemrosesan kode asinkron menjadi sinkron dengan menunggu proses selesai sebelum melanjutkan. Async/await memudahkan penggunaan Promise dengan menambahkan keyword async pada fungsi dan menunggu hasil Promise dengan await.

Diunggah oleh

Zefi Dermawan
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 4

Javascript pada dasarnya bersifat asynchron yang artisanya setiap baris perintah akan dieksekusi

tanpa menunggu perintah sebelumnya selesai dikerjakan. Nah pasti banyak dari kalian tidak
menyadari hal ini atau ada yang sadar tapi tidak memperdulikannya hehe.

Berikut adalah ilustrasi perbedaan asynchronous dan synchronous:

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);

console.log("Hello World 2");

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 :

// ini yang disebut dengan eksekutor


let myPromise = new Promise(function(resolve, reject){

});

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.

let myPromise = new Promise(function(resolve, reject){


setTimeout(function(){
resolve("Hello World 1");
}, 1000);
});

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);

console.log("Hello World 2");

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.

async function count(a, b) {


return a + b;
}

Fungsi diatas akan menghasilkan Promise dengan hasil dari nilai a ditambah dengan b sebagai
nilai hasil, dan cara memanggil fungsinya seperti Promise pada umumnya.

count(1, 2).then(result => console.log(result))

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.

async function doAwait() {

let promise = new Promise((resolve, reject) => {


setTimeout(() => resolve("done!"), 1000)
});

let result = await promise; // menunggu hasil 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.

Anda mungkin juga menyukai