Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Understanding Promise Chaining Internal Mechanics

I am learning promise chaining and I stumbled upon a doubt. Consider the below promise chain –

const myPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("foo");
    }, 10000);
});

myPromise
    .then(handleFulfilledA, handleRejectedA)  // first then
    .then(handleFulfilledB, handleRejectedB)  // second then
    .then(handleFulfilledC, handleRejectedC); // third then

The promise constructor returns a promise object myPromise. The handleFulfilledA and handleRejectedA are attached to the [[PromiseFulfillReactions]] and [[PromiseRejectReactions]] of myPromise object. The second and the third then method will be called before myPromise is resolved as myPromise takes 10 seconds.

What happens internally when the second and the third .then method is encountered?

I tried to find an answer and came to know that each then method returns a new Promise object. Let’s call them promiseB and promiseC. The handleFulfilledB and handleRejectedB are attached to the [[PromiseFulfillReactions]] and [[PromiseRejectReactions]] of promiseB. Similarly, handleFulfilledC and handleRejectedC are attached to promiseC.

But if this is the case, when myPromise is fulfilled and its [[PromiseFulfillReactions]] are executed, how will its reactionhandlers(handleFulfilledA, handleRejectedA) know that it has to resolve or reject promiseB? How will the handler come to know that the then to which it was passed to has created a promise which is promiseB? In other words, how is the connection between the handlers and the new promises established?"

Tags:

2

Answers


  1. 0

    As per the MDN documentation for the then method:

    then() returns a new promise object but mutates the promise object
    it’s called on, appending the handlers to an internal list. Therefore
    the handler is retained by the original promise and its lifetime is at
    least as long as the original promise’s lifetime.

    This should explain why the chaining is possible.

    Login or Signup to reply.
  2. 0

    But if this is the case, when myPromise is fulfilled and its [[PromiseFulfillReactions]] are executed, how will its reactionhandlers(handleFulfilledA, handleRejectedA) know that it has to resolve or reject promiseB?

    handleFulfilledA or handleRejectedA will not directly resolve or reject the promiseB.

    The promise returned by the first then method call, i.e. promiseB depends on two things:

    • What happens to the original promise, i.e. myPromise, and
    • What happens inside the fulfillment / rejection handler

    In your code, as myPromise will be resolved, handleFulfilledA will be called, and depending on what you do inside this handler, promiseB will either resolve or get rejected.

    If you return any non-promise value, or implicitly return undefined, promiseB will be fulfilled with that value as its fulfillment value.
    Similarly, if you throw an error inside the fulfillment handler of myPromise, the promiseB will get rejected with the thrown error as the rejection reason.

    Finally, what if you return a promise from the fulfillment handler? In that case, promiseB will get resolved to that promise. This simply means that fate of the promiseB will depend on the promise returned from the fulfillment handler of myPromise. The promiseB will fulfill if the promise returned by the then handler is fulfilled. Similarly, promiseB will get rejected if the promise returned by the then handler is rejected.

    Following code example should give you an idea of how outer promise (promiseB) can resolve to the inner promise (returned by the then handler):

    const outerPromise = new Promise((resolveOuter, rejectOuter) => {
   const innerPromise = new Promise((resolveInner, rejectInner) => {
      // ...
   });

   // resolve/reject functions of the outer promise are 
   // passed to the `then()` method of the inner promise 
   // as the fulfilment/rejection handlers respectively
   innerPromise.then(resolveOuter, rejectOuter);
});

    Recommened reading: Javascript promises … in wicked detail

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search