Promise dalam Gaya Sinkron di JavaScript

Untuk mengatasi masalah promise hell, diciptakan sintaksis promise khusus yang memungkinkan penulisan kode asinkron menjadi jauh lebih mudah - dalam gaya sinkron.

Mari kita mulai mempelajarinya. Pertama-tama ambil kode dari pelajaran sebelumnya:

javascriptfunction func() {
  getSmth(2).then(res => {
    console.log(res); // akan menampilkan 4
  });
}

func();

Jika fungsi getSmth kita adalah sinkron, maka kode fungsi func dapat kita tulis ulang sebagai berikut:

javascriptfunction func() {
  let res = getSmth(2);
  console.log(res); // akan menampilkan 4
}

Fungsi getSmth, bagaimanapun, adalah asinkron, oleh karena itu kode di atas tidak akan berfungsi. Tetapi, dengan menggunakan gaya sinkron promise, kita bisa mendapatkan sesuatu yang serupa. Mari kita lakukan.

Pertama-tama kita harus mendeklarasikan fungsi func kita sebagai asinkron menggunakan perintah khusus async:

javascriptasync function func() {
  
}

Setelah itu kita dapat di dalam fungsi func menggunakan perintah khusus await. Perintah ini, jika ditulis sebelum sebuah promise, akan memaksa JavaScript untuk menunggu sampai promise terselesaikan. Setelah itu perintah akan mengembalikan hasil promise, dan eksekusi kode akan dilanjutkan.

Dalam kasus kita, kita harus menulis await sebelum pemanggilan getSmth. Karena hasil dari pemanggilan fungsi ini adalah sebuah promise, maka eksekusi kode selanjutnya akan dilanjutkan hanya setelah promise ini diselesaikan. Nah, hasil promise dapat disimpan dalam sebuah variabel. Mari lakukan yang dijelaskan:

javascriptasync function func() {
  let res = await getSmth(2);
  console.log(res); // akan menampilkan 4
}

func();

Mari kita panggil getSmth beberapa kali:

javascriptasync function func() {
  let res1 = await getSmth(2);
  let res2 = await getSmth(3);
  
  console.log(res1 + res2); // akan menampilkan 13
}

func();

Dan sekarang mari panggil getSmth dalam loop:

javascriptasync function func() {
  let arr = [1, 2, 3, 4, 5];
  let sum = 0;
  
  for (let elem of arr) {
    sum += await getSmth(elem);
  }
  
  console.log(sum);
}

func();

javascriptfunction func() {
  getSmth(2).then(res1 => {
    getSmth(3).then(res2 => {
      getSmth(4).then(res3 => {
        console.log(res1 + res2 + res3);
      });
    });
  });
}

func();