Asynchronous Javascript 3 - Promise

Do you still remember the callback hell from the previous article? Allow me to remind you of that horror.

getData(baseUrl + "/comments/1", (err, data) => {
  if (err) {
    console.log(err);
  } else {
    const postId = data.postId;
    getData(baseUrl + "/posts/" + postId, (err, data) => {
      if (err) {
        console.log(err);
      } else {
        const userId = data.userId;
        getData(baseUrl + "/users/" + userId, (err, data) => {
          if (err) {
            console.log(err);
          } else {
            document.getElementById("display").innerHTML = JSON.stringify(
              data,
              null,
              4,
            );
          }
        });
      }
    });
  }
});

But don’t worry, because in this article I will discuss how to escape from callback hell by using Promise.

What is a Promise?

Imagine you are ordering food from your favorite restaurant through an online application. When ordering, you don’t immediately get your food; there are several steps that must be taken such as preparing, cooking, and delivering the food to your home. During this process, you can do other things like watching TV, reading books, or working, without having to wait at the door.

In this scenario, the food ordering app gives you a “promise” that your food will arrive. You might also get status updates like “food is being prepared”, “food is being delivered”, and finally “food has arrived”.

Similarly in JavaScript, Promise is a way to manage asynchronous operations. When you create a Promise, it’s like making a promise that some value or result will be available in the future. In practice, a Promise can be in one of three states:

• Pending (Waiting): The state when a Promise is still waiting for the result of an asynchronous process, not yet fulfilled or rejected.
• Fulfilled (Fulfilled): When a Promise has obtained the expected result.
• Rejected (Rejected): When an error occurs and the Promise cannot provide the expected result.

By using Promise, you can write cleaner and more understandable code compared to traditional callbacks. You can use the .then() method to handle successful results and .catch() to handle errors.

const janjiMakanan = new Promise((resolve, reject) => {
  resolve("Selamat makan");
  // reject('Toko kehabisan makanan')
});

janjiMakanan
  .then((makanan) => {
    console.log(`Makanan telah tiba: ${makanan}`);
  })
  .catch((error) => {
    console.log(`Terjadi kesalahan: ${error}`);
  });

How to handle Promise?

Basically a Promise is an object that stores a value that is promised to exist at a certain time. Promise has 3 instance methods:

• .then(), a method that will run if the Promise status has been fulfilled, and will execute the callback function inside it with arguments containing the value of the Promise. The .then() method can accept 2 arguments, namely fulfilled and rejected callbacks.
• .catch(): A method that will run if the Promise status has been rejected, and will execute the callback function inside it with arguments containing the reason for rejection.
• .finally(): A method that will run when all .then() and .catch() callbacks have finished executing. The callback in this method does not accept any arguments and is used to perform cleanup tasks or other final actions.

The following code is an example of Promise handling using the fetch() API which returns a Promise so it doesn’t block the execution of other functions.

const baseUrl = "https://jsonplaceholder.typicode.com";

console.log("code starting...");
// mendapatkan data komentar
fetch(baseUrl + "/comments/1")
  .then((response) => response.json())
  // mendapatkan data post
  .then((data) => fetch(baseUrl + "/posts/" + data.postId))
  .then((response) => response.json())
  // mendapatkan data user
  .then((data) => fetch(baseUrl + "/users/" + data.userId))
  .then((response) => response.json())
  .then((data) => {
    console.log("user fetched...");
    console.log(data);
  })
  // menghandle error yang muncul dari semua Promise sebelumnya
  .catch((error) => {
    console.log(error);
  })
  .finally(() => {
    console.log("promise end...");
  });
console.log("code finishing...");

The interconnected pattern between Promise methods is called Chaining. This is possible because every .then() and .catch() method also returns a Promise. The following diagram illustrates the flow of Promise execution.

class Pertambahan {
  constructor() {
    this.jumlah = 0;
  }

  tambah(angka) {
    this.jumlah += angka;
    // mengembalikan objek pertambahan
    return this;
  }

  hasil() {
    return this.jumlah;
  }
}

const hitung = new Pertambahan();
const hasil = hitung.tambah(3).tambah(6).tambah(1).hasil();
console.log(hasil);

Execution of Promise callbacks inside runtime

In the first article about the introduction to asynchronous programming, the javascript runtime, or the environment where Javascript is run, was discussed.

Promise and setTimeout() both have callbacks that will be called asynchronously in the future. Do they share the same queue space? If yes, then their callbacks will certainly be called in sequence. Let’s prove it, try to guess the output of the following code

console.log("1");
setTimeout(() => {
  console.log("2");
});
setTimeout(() => {
  console.log("3");
}, 100);
Promise.resolve().then(() => {
  console.log("4");
});
console.log("5");

After running, it turns out that the output from Promise appears first before setTimeout(). This is because Promise has its own queue called MicroTask queue. The following is a simulation of the previous code in the Javascript runtime.

Memahami urutan task asynchronous pada bahasa Javascript memang cukup menantang, mirip seperti masalah specificity pada CSS. Namun ini sangatlah penting, karena banyak masalah pada pengembangan aplikasi Javascript bisa diselesaikan dengan pemrograman asynchronous.

Membuat Promise-mu sendiri

Membuat sebuah Promise sangatlah mudah (yang sulit memahaminnya 😀). Sebelumnya Saya telah membuat sebuah Promise bernama janjiMakanan yang memiliki nilai terpenuhi 'Selamat makan'.

let janjiMakanan = new Promise((resolve, reject) => {
  resolve("Selamat makan");
});

Promise janjiMakanan adalah instance yang dibuat dari promise constructor. Ia menerima callback yang akan dipanggil dengan 2 buah argumen berupa fungsi resolve() dan reject(). Penamaan kedua fungsi tersebut bersifat konvensional, kamu bebas menamainya apa saja. Berikut adalah kegunaanya:

• resolve(nilai) Fungsi ini digunakan untuk mengubah status Promise menjadi fulfilled (terpenuhi) dan mengembalikan nilai yang dijanjikan yang akan ditangani oleh metode .then().
• reject(alasan): Fungsi ini digunakan untuk mengubah status Promise menjadi rejected (ditolak) dan mengembalikan alasan penolakan. Ketika reject dipanggil, Promise akan gagal dan alasan yang diberikan sebagai argumen ke callback dalam metode .catch().

Metode statik Promise

konstruktor Promise memiliki beberapa metode statik yang bisa digunakan tanpa perlu membuat sebuah objek Promise (dengan new Promise()). Berikut adalah metode-metode tersebut.

• Promise.resolve() Mengembalikan sebuah Promise yang langsung terpenuhi dengan nilai yang diberikan.

• Promise.reject() Mengembalikan sebuah Promise yang langsung ditolak dengan alasan yang diberikan.

• Promise.all() Menerima argumen berupa array berisi Promise dan mengembalikan sebuah Promise yang akan terpenuhi jika semua Promise terpenuhi, dan ditolak apabila ada satu Promise yang ditolak.

  index.js

  const promises = [Promise.resolve(1), Promise.resolve(2)];
  // const promises = [Promise.reject(1), Promise.resolve(2)];
  
  Promise.all(promises)
    .then((values) => console.log('value:', values))
    .catch((error) => console.log('error:', error));

  Run

  Open Sandbox

• Promise.allSettled() Juga menerima argumen berupa array berisi Promise dan mengembalikan sebuah Promise yang akan terpenuhi jika semua Promise telah selesai, tak peduli jika hasilnya terpenuhi atau ditolak.

  index.js

  const promises = [Promise.resolve(1), Promise.reject(2)];
  // const promises = [Promise.reject(1), Promise.reject(2)];
  
  Promise.allSettled(promises)
    .then((values) => console.log("value:", values))
    .catch((error) => console.log("error:", error));

  Run

  Open Sandbox

• Promise.race() Menerima argumen berupa array dan mengembalikan sebuah Promise yang akan terpenuhi ketika satu Promise selesai, baik itu terpenuhi ataupun ditolak.

  index.js

  const promises = [Promise.resolve(1), Promise.reject(2)];
  // const promises = [Promise.reject(1), Promise.resolve(2)];
  
  Promise.race(promises)
    .then((values) => console.log("value:", values))
    .catch((error) => console.log("error:", error));

  Run

  Open Sandbox

• Promise.any() Menerima argumen berupa array dan mengembalikan sebuah Promise yang akan terpenuhi ketika satu Promise terpenuhi. Hanya ditolak ketika semua Promise ditolak dan memberikan AggregateError

  index.js

  const promises = [Promise.reject(1), Promise.resolve(2)];
  // const promises = [Promise.rreject(1), Promise.reject(2)];
  
  Promise.any(promises)
    .then((values) => console.log("value:", values))
    .catch((error) => console.log("error:", error));

  Run

  Open Sandbox

Aturan-aturan utama Promise

Berikut adalah beberapa aturan utama Promise yang perlu diperhatikan agar dapat menggunakan Promise dengan baik.

1. Jika callback mengembalikan Promise lain, maka eksekusi .then() selanjutnya akan menunggu sampai Promise tersebut terpenuhi (atau ditolak).

function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

Promise.resolve("sukses")
  .then((e) => {
    console.log(e);
    return sleep(2000);
  })
  .then((e) => console.log("2 detik kemudian"))
  .catch((er) => console.log(er));

2. Jika callback pada metode .then() sebelumnya berupa promise, pastikan untuk melakukan pengembalian, jika tidak, metode .then() selanjutnya tidak dapat melacak keterpenuhan Promise, dan Promise menjadi floating.

function sleepWithValue(ms, value) {
  return new Promise((resolve) => setTimeout(() => resolve(value), ms));
}

Promise.resolve().then(() => {
  sleepWithValue(2000, 'sukses!')
}).then((hasil) => {
  console.log(hasil)
})

3. Promise lebih baik ditangani secara flat dibanding nested, karena nanti akan lebih sulit dibaca.

// hindari *nesting*
fetch("url1").then((response1) => {
  return fetch("url2").then((response2) => {
    //...
  });
});

// Pilih bentuk *flat*
fetch("url1")
  .then((response1) => fetch("url2"))
  .then((response2) => {
    //...
  });

4. Callback yang dijadikan argumen untuk metode .then() tidak akan pernah dipanggil secara synchronous meski Promise-nya sudah terpenuhi.

console.log("start");
Promise.resolve("sukses").then((hasil) => console.log(hasil));
console.log("end"); // start, end, sukses

5. Hanya nilai terpenuhi atau tertolak pertama yang akan dikembalikan oleh suatu Promise.

new Promise((resolve, reject) => {
  resolve("1");
  resolve("2");
}).then((hasil) => {
  console.log(hasil); // '1'
});

Itulah sedikit tentang Promise. Masih banyak detail yang bisa dipelajari tentang Promise dan penanganannya di internet. Setelah ini Saya akan membahas satu hal lagi terkait Promise yaitu async/await.

Referensi

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises
• https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide
• https://www.joshwcomeau.com/javascript/promises/#rejected-promises-8
• https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md