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.

Understanding the order of asynchronous tasks in Javascript is quite challenging, similar to the specificity problem in CSS. However, this is very important, because many problems in Javascript application development can be solved with asynchronous programming.

Creating Your Own Promise

Creating a Promise is very easy (the hard part is understanding it 😀). Earlier I created a Promise named janjiMakanan that has a fulfilled value of 'Selamat makan'.

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

The Promise janjiMakanan is an instance created from a promise constructor. It accepts a callback that will be called with 2 arguments: the resolve() and reject() functions. The naming of these two functions is conventional — you can name them anything you like. Here is their purpose:

• resolve(value) This function is used to change the Promise status to fulfilled and return the promised value that will be handled by the .then() method.
• reject(reason): This function is used to change the Promise status to rejected and return the reason for rejection. When reject is called, the Promise will fail and the reason given as the argument to the callback in the .catch() method.

Static Promise Methods

The Promise constructor has several static methods that can be used without creating a Promise object (with new Promise()). Here are those methods.

• Promise.resolve() Returns a Promise that is immediately fulfilled with the given value.

• Promise.reject() Returns a Promise that is immediately rejected with the given reason.

• Promise.all() Accepts an array of Promises and returns a Promise that will be fulfilled if all Promises are fulfilled, and rejected if any one Promise is rejected.

  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() Also accepts an array of Promises and returns a Promise that will be fulfilled when all Promises have settled, regardless of whether they were fulfilled or rejected.

  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() Accepts an array and returns a Promise that will settle as soon as one Promise settles, whether fulfilled or rejected.

  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() Accepts an array and returns a Promise that will be fulfilled as soon as one Promise is fulfilled. Only rejected when all Promises are rejected, throwing an 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

Key Rules of Promise

Here are some key rules for Promise that should be followed to use Promise properly.

1. If a callback returns another Promise, the next .then() execution will wait until that Promise is fulfilled (or rejected).

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. If the callback in a previous .then() method returns a promise, make sure to return it; otherwise, the next .then() method cannot track the Promise fulfillment, and the Promise becomes 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 is better handled in a flat manner rather than nested, as nested code will be harder to read later.

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

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

4. A Callback passed as an argument to the .then() method will never be called synchronously, even if the Promise is already fulfilled.

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

5. Only the first fulfilled or rejected value will be returned by a Promise.

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

That’s a brief overview of Promise. There are many more details about Promise and its handling available online. Next, I will discuss one more topic related to Promise: async/await.

References

• 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