Sequencing and fulfillment of promises in a job queue using Promise.race

Question

Sequencing and fulfillment of promises in a job queue using Promise.race

Currently, I'm grappling with the concepts of job queue and promise resolution in Javascript. While going through Nicholas Zakas' book "Understanding ECMAScript 6", I came across a code snippet regarding Promise.race() that has left me puzzled:

let p1 = new Promise(function(resolve, reject) {
    resolve(42);
});

let p2 = Promise.reject(43);

let p3 = new Promise(function(resolve, reject) {
    resolve(44);
});

let p4 = Promise.race([p1, p2, p3]);

p4.catch(function(value) {
    console.log(value);     // 43
});

In this scenario, p4 is rejected due to p2 already being in a rejected state when Promise.race() is invoked. Even though p1 and p3 are fulfilled, their outcomes are disregarded since they happen after p2's rejection.

My understanding is that Promise.race() resolves as soon as one of the provided promises is resolved. However, I am confused about why the book states that promise p1 settles after p2. If we follow the code from top to bottom, p1 comes first, so I would expect it to be settled first. Could this be due to the function wrapping, or is there something about Javascript execution order that I am missing?

Would appreciate it if someone could help clarify this concept for me.

javascript promise

Answer 1

Answer №1

It seems like the information in the book is inaccurate. In this case, p1 is completed before p2 is even created. When the example is run, the output is "42" instead of the expected "43" error message.

It's possible that the author misunderstood the behavior of the new Promise callback, which is actually synchronously invoked unlike other promise callbacks that use then. Perhaps the intended example was supposed to be

let p1 = Promise.resolve().then(() => 42);
//                              ^^^^^^^^ asynchronous
let p2 = Promise.reject(43);
let p3 = Promise.resolve(44);

let p4 = Promise.race([
  p1, // still pending
  p2, // already rejected
  p3  // already fulfilled
]); // hence, p4 will be rejected since the callback on p2 is the first to be invoked
p4.then(console.log, console.error);

Answer 2

It seems like the information in the book is inaccurate. In this case, p1 is completed before p2 is even created. When the example is run, the output is "42" instead of the expected "43" error message.

It's possible that the author misunderstood the behavior of the new Promise callback, which is actually synchronously invoked unlike other promise callbacks that use then. Perhaps the intended example was supposed to be

let p1 = Promise.resolve().then(() => 42);
//                              ^^^^^^^^ asynchronous
let p2 = Promise.reject(43);
let p3 = Promise.resolve(44);

let p4 = Promise.race([
  p1, // still pending
  p2, // already rejected
  p3  // already fulfilled
]); // hence, p4 will be rejected since the callback on p2 is the first to be invoked
p4.then(console.log, console.error);

Answer 3

Answer №2

I concur with Bergi's response. The promise constructor callback is called synchronously when you need to access the resolve/reject function outside of the constructor's scope. As shown in your code snippet, it is indeed executed synchronously. However, if the resolve/reject function is triggered by an ajax request or wrapped in a setTimeout function, the execution will then become asynchronous.

const p1 = new Promise((resolve, reject) => {
   setTimeout(() => resolve(42), 100); // resulting in an asynchronous process.
});

Answer 4

I concur with Bergi's response. The promise constructor callback is called synchronously when you need to access the resolve/reject function outside of the constructor's scope. As shown in your code snippet, it is indeed executed synchronously. However, if the resolve/reject function is triggered by an ajax request or wrapped in a setTimeout function, the execution will then become asynchronous.

const p1 = new Promise((resolve, reject) => {
   setTimeout(() => resolve(42), 100); // resulting in an asynchronous process.
});

Sequencing and fulfillment of promises in a job queue using Promise.race

Answer №1

Answer №2

Similar questions

Utilize JQuery to modify hover state when focused and restrict tab navigation to specific areas on the keyboard

What could be the reason for the error message when using rs.send with a string input?

Socket.io encounters emitting issue within express app.post function

JavaScript and Angular are used to activate form validation

Is there a more effective approach to designing a login screen?

Creating the jquery/javascript code needed to produce an event or alert similar to the "Confirm Navigation" prompt used on sites like Stack Overflow

Creating a variable by using a conditional operation in JavaScript

What is the best approach to achieve the old THREE.SpriteAlignment effect in the latest version of three.js?

Can you provide some insight into why the init() method is throwing an error?

A step-by-step guide on accessing an API to check the status updates of ongoing API calls

Changing the text of a link when hovering - with a transition

Utilize getJSON to refresh the JavaScript datetimepicker

Lending a hand in deselecting a rule within the jcf-hidden add-on using Selenium

Chrome has some issues with resizing the SVG Pattern element

Correct validation is not achieved when the "!" symbol is used in the matches function

What could be causing my divs to collide with each other in a Javascript environment?

The text's worth in the code of javascript

React Native - Implementing asynchronous array filtering using async/await

ngResource transformResponse guide on dealing with both successful and erroneous responses

The Execution of a Function Fails When Passed to a Functional Component