Javascript Promise

Question

I´ve been studying Javascript from different sources and I´ve come across this block of code:

function waitForUI() {
  return new Promise(function (resolve) {
    display.getBoundingClientRect();
    requestAnimationFrame(function () {
       requestAnimationFrame(resolve);
       });
   });
}

From what I´ve understood, the promise object can be resolved or rejected and depending on which one something different will happen. But in this case, the promise only has resolve, meaning it can never be rejected? And then there´s a child promise inside the function with only resolve also.. What´s the point then of the promise if it is always going to go through?

I´m not entirely sure how this whole function works so if someone can give me a hint I´d be very grateful, I´ve been thinking about it for a while but can´t get a good answer.

Cheers

Answer 1

But in this case, the promise only has resolve, meaning it can never be rejected?

Yes, this promise will always get fulfilled^{1 2}.

And then there's a child promise inside the function with only resolve also...

No, there is no "child promise". I assume you refer to requestAnimationFrame(resolve);? That's just passing the resolve function (that was received from the new Promise constructor) to requestAnimationFrame as a callback.

What's the point then of the promise if it is always going to go through?

The main purpose of promises isn't that they distinguish between error and success cases, but that they do so asynchronously. It's not so important which happens, but when it happens.

_{1: unless it doesn't happen ever
2: actually it also will get rejected if display.getBoundingClientRect() or the outer requestAnimationFrame(…) will throw a synchronous exception}

Answer 2

First about the child promise. I suppose you mean this:

requestAnimationFrame(function () {
   //....
});

This is in fact not really a promise, but a (more basic) callback implementation, that gets called when something is done. In this case when the next paint cycle occurs. Don't be surprised that resolve can be called from within that callback. There is no rule that says you can't do that: resolve is still in scope within that function.

The reason why requestAnimationFrame is called again within that callback is to be sure the repainting has happened, which is certain when you wait for 2 cycles. Then resolve is called.

Then about the rejection of the promise. Yes, even that promise can be rejected, since the argument is passed by the promise internals, and you can make use of it if necessary:

  return new Promise(function (resolve, reject) { // added reject
    display.getBoundingClientRect();
    if (somecondition) { // whatever error condition you might have
        reject();
    } else {
       requestAnimationFrame(function () {
          requestAnimationFrame(resolve);
       });
    }
 });