Cara menggunakan promise result undefined javascript

CARA BUAT FUNGSI PROMISE PADA JAVASCRIPT

Halo semuanya, kali ini kita mau buat fungsi promise pada JavaScript. Saya menggunakan Node.js sebagai runtimenya.

Seperti yang sudah dijelaskan pada post perbandingan Express dengan Laravel, mengenai cara kerja aplikasi, JavaScript ini bersifat asynchronous. Dengan menggunakan Promise, kita dapat membuat alur aplikasi yang asynchronous seolah-olah seperti berjalan synchronous.

Kita akan membandingkan bedanya menggunakan promise dan tidak.

Berikut adalah source code fungsi biasa, tanpa menggunakan promise.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

function callKucing(name){
  return name+' : Purr';
}

function main(){
  let dialogTanpaPromise = callKucing('Kitty');
  console.log(dialogTanpaPromise);
}

main();

Jika dijalan mengeluarkan response atau balasan sebagai berikut

Berikut adalah source code fungsi dengan menggunakan promise. Pemanggilan fungsi menggunakan async/await.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

function panggilKucing(name){
  return new Promise(function(resolve, reject){
    resolve(name+' : Meow..');
  });
}

async function main(){
  let dialogDenganPromise = await panggilKucing('Doraemon');
  console.log(dialogDenganPromise);
}

main();

Jika dijalankan mengluarkan response sebagai berikut

Berikut source code jika kedua fungsi digabungkan

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

function panggilKucing(name){
  return new Promise(function(resolve, reject){
    resolve(name+' : Meow..');
  });
}

function callKucing(name){
  return name+' : Purr';
}

async function main(){
  let dialogTanpaPromise = callKucing('Kitty');
  console.log(dialogTanpaPromise);

  let dialogDenganPromise = await panggilKucing('Doraemon');
  console.log(dialogDenganPromise);
}

main();

Jika dijalankan memberikan response sebagai berikut

Loh.. Responsenya sama. Lalu ada bedanya menggunakan promise dan tanpa promise? 

Reponse yang sama disebabkan karena pemrosesan fungsi panggilKucing dan callKucing tidak berat sehingga waktu pemanggilan dan balasan fungsi tidak besar.

Lalu bagaimana jika waktu pemanggilannya besar? 

Sekarang kita akan menambahkan delay pada fungsi panggilKucing dan callKucing.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

function panggilKucing(name){
  return new Promise(function(resolve, reject){
    setTimeout(function(){
      resolve(name+' : Meow..');
    }, 2000);
  });
}

function callKucing(name){
  setTimeout(function(){
    return name+' : Purr';
  }, 2000);
}

async function main(){
  let dialogTanpaPromise = callKucing('Kitty');
  console.log(dialogTanpaPromise);

  let dialogDenganPromise = await panggilKucing('Doraemon');
  console.log(dialogDenganPromise);
}

main();

Response yang diterima sebagai berikut.

Berdasarkan source code, fungsi panggilKucing menggunakan promise. Nilai kembalian dari promise dimasukkan pada variable dialogDenganPromise. 

Promise memiliki 3 kondisi: pending, fulfilled, dan reject.

Sebelum promise di resolve atau di reject, kondisi promise akan tetap pending. Setelah promise di resolve, dialogDenganPromise akan berisi nilai kembalian promise. Ketika promise dalam kondisi fulfilled, semua fungsi yang menggunakan variable kembalian promise (dialogDenganPromise) mulai dieksekusi.

Pada fungsi callKucing, karena tidak menggunakan promise, sehingga fungsi berjalan seperti pada umumnya, asynchronous. Fungsi console.log langsung tereksekusi walaupun variable di dalamnya (dialogTanpaPromise) tidak ada isinya. Hal ini yang menyebabkan hasilnya tertulis undefined atau belum terdefinisi.

Fungsi promise ini cocok digunakan jika kita ingin membuat proses synchronous pada JavaScript. Selain menggunakan promise sebenarnya bisa menggunakan fungsi callback. Penggunaan fungsi callback sebenarnya cukup mudah juga. Namun jika ingin melakukan proses yang panjang, penggunakan callback tidak disarankan karena akan ada kemungkinan untuk terjebak dalam callback. Istilah terjebak di dalam callback umumnya disebut sebagai Callback Hell.

Selain itu, menurut saya pribadi, promise menggunakan async/await ini lebih enak dibaca dan terlihat lebih rapi. Namun, jangan lupa untuk menyertakan try catch jika menggunakan async/await. Berikut source code menggunakan try catch. 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

function panggilKucing(name){
  return new Promise(function(resolve, reject){
    setTimeout(function(){
      resolve(name+' : Meow..');
    }, 2000);
  });
}

function callKucing(name){
  setTimeout(function(){
    return name+' : Purr';
  }, 2000);
}

async function main(){
  let dialogTanpaPromise = callKucing('Kitty');
  console.log(dialogTanpaPromise);

  try{
    let dialogDenganPromise = await panggilKucing('Doraemon');
    console.log(dialogDenganPromise);
  } catch(error){
    console.log(error);
  }
}

main();

Walaupun pada source code, fungsi panggilKucing tidak mengembalikan kondisi reject. Namun agar tetap mudah dibaca dan agar lebih terorganisir, sebaiknya tetap ditambahkan catch.

Sekian dulu post kali ini, mengenai cara membuat fungsi promise.

Nantikan post selanjutnya. Kalau males baca, bisa juga liat di video disini (link menyusul). 

Salam share,

Funtastic Share