Promises Chaining

Promises/Async/Await: Promises Chaining

---

What is the definition of promise chaining in JavaScript?

View Answer:

Interview Response: Chaining promises is a process of chaining subscribers of the initial promise. Typically, we use the dot to chain each subscriber in the sequence we want them to interact with the Promise.

Technical Response: Chaining promises is why we have promises in the first place. It is proper to tell JavaScript the next thing to do after an asynchronous task is done, thus avoiding the pyramid of doom typically associated with nested callbacks. It also reduces the complexity of your code and increases readability.

Code Example:

new Promise(function (resolve, reject) {
  setTimeout(() => resolve(1), 1000); // (*)
})
  .then(function (result) {
    // (**)

    alert(result); // 1
    return result * 2;
  })
  .then(function (result) {
    // (***)

    alert(result); // 2
    return result * 2;
  })
  .then(function (result) {
    alert(result); // 4
    return result * 2;
  });

---

What is a typical error made by new JavaScript developers when it comes to promises chaining?

View Answer:

Interview Response: A classic mistake made by new developers is breaking the promises chain. New developers can often attempt to separate or break the chain for readability or lack of knowledge. Although technically, we can also add many “.then” to a single promise. This method isn't considered chaining since it adds numerous handlers to a single promise without passing the result. Instead, they process the result independently from one another. We rarely need multiple handlers for one promise in practice, and chaining often gets used.

Code Example:

let promise = new Promise(function (resolve, reject) {
  setTimeout(() => resolve(1), 1000);
});

promise.then(function (result) {
  alert(result); // 1
  return result * 2;
});

promise.then(function (result) {
  alert(result); // 1
  return result * 2;
});

promise.then(function (result) {
  alert(result); // 1
  return result * 2;
});

note

An example of breaking the chain of Promises is using the promise.then, in an individual invocation, subscribe to a promise.

---

Can you briefly explain the benefits of returning a new promise in JavaScript?

View Answer:

Interview Response: A handler, used in .then(handler), may create and return a new promise. In that case, further handlers wait until it settles and then return its result. Returning promises allows us to build chains of asynchronous actions.

Code Example:

new Promise(function (resolve, reject) {
  setTimeout(() => resolve(1), 3000);
})
  .then(function (result) {
    alert(result); // 1

    // Returning a Promise
    return new Promise((resolve, reject) => {
      // (*)
      setTimeout(() => resolve(result * 2), 2000);
    });
  })
  .then(function (result) {
    // (**)

    alert(result); // 2

    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(result * 2), 1000);
    });
  })
  .then(function (result) {
    alert(result); // 4
  });

---

Can you briefly explain what a thenable is in JavaScript?

View Answer:

Interview Response: A “thenable” object is an arbitrary object that has a method .then. It gets treated the same way as a promise. The idea is that 3rd-party libraries may implement “promise-compatible” objects of their own. They can have an extended set of methods and be compatible with native promises, because they implement .then. This feature allows us to integrate custom objects with promise chains without having to inherit from Promise.

Code Example:

class Thenable {
  constructor(num) {
    this.num = num;
  }
  then(resolve, reject) {
    console.log(resolve); // function() { native code }
    // resolve with this.num * 2 after the 1 second
    setTimeout(() => resolve(this.num * 2), 1000); // (**)
  }
}

new Promise((resolve) => resolve(1))
  .then((result) => {
    return new Thenable(result); // (*)
  })
  .then(console.log); // shows 2 after 1000ms

---