Details regarding the enthusiastic execution of Promise callbacks

Question

Details regarding the enthusiastic execution of Promise callbacks

Is there a specific specification or implementation detail that dictates how quickly the callbacks of a promise are evaluated? For example, if I have:

var promise = new Promise((resolve) => {
   resolve()
});

console.log(promise); // there is no public field '<state>', but you can see it in the console of the dev tools

I notice that the promise is already fulfilled immediately. I expected that the Promise would wait to call the resolve callback at a later time, leaving a "time window" where the promise remains unfulfilled.

Is this quick evaluation of the resolve callback intentional design, or is it simply an implementation detail?

javascript promise specifications

Answer 1

Answer №1

When the Promise constructor is used, the callback provided to it is executed synchronously by the constructor itself. This means that by the time the constructed object is returned by the `new` operator, the callback has already been run.

This behavior is specified in the ECMA Script documentation. The steps for creating a new Promise in new Promise(excecutor) outline that the executor function is called first (step 9) and then the promise object is returned (step 11).

The folks at Mozilla provide this information in their documentation:

Syntax
new Promise(executor)
Parameters
executor
The executor parameter refers to a function that should be executed during the process of constructing a new Promise object.

Typically, the callback function in the constructor is utilized to begin an asynchronous operation (using functions like `setTimeout`) that will eventually resolve the promise even after the callback has finished executing.

function executor(resolve) { 
    setTimeout(resolve, 100);
}

var promise = new Promise(executor);

In some cases, such as the example given, the callback directly invokes the `resolve` function synchronously instead of using an async API. This results in the created promise being fulfilled immediately when assigned to the `promise` variable.

Answer 2

When the Promise constructor is used, the callback provided to it is executed synchronously by the constructor itself. This means that by the time the constructed object is returned by the `new` operator, the callback has already been run.

This behavior is specified in the ECMA Script documentation. The steps for creating a new Promise in new Promise(excecutor) outline that the executor function is called first (step 9) and then the promise object is returned (step 11).

The folks at Mozilla provide this information in their documentation:

Syntax
new Promise(executor)
Parameters
executor
The executor parameter refers to a function that should be executed during the process of constructing a new Promise object.

Typically, the callback function in the constructor is utilized to begin an asynchronous operation (using functions like `setTimeout`) that will eventually resolve the promise even after the callback has finished executing.

function executor(resolve) { 
    setTimeout(resolve, 100);
}

var promise = new Promise(executor);

In some cases, such as the example given, the callback directly invokes the `resolve` function synchronously instead of using an async API. This results in the created promise being fulfilled immediately when assigned to the `promise` variable.

Details regarding the enthusiastic execution of Promise callbacks

Answer №1

Syntax

Parameters

Similar questions

Transferring PHP objects to JavaScript arrays

Steps for positioning one div below another:1. Set the position property

Ways to access a clicked element using AngularJS with ngClick

Is there a solution to successfully retrieving the value of res from the readCsv() method instead of it returning undefined?

Backand - How can I display the contents of variables using console.log() within Security Actions?

Loop through an array of JavaScript objects, compare a specific value within each object with all others to ensure uniqueness, and then add the unique objects to a new array

What is the best way to conceal a modal using jquery?

Decide whether to execute a promise or not, and then pass the resulting value to another promise

Linking a jquery modal popup script to a button click event

Creating interactive tables in JavaScript with dynamic row adding, editing and deleting capabilities

perform action following a $router.go in Vue

The consistent index is shared among all dynamically generated elements

Setting limits to disable or remove specific times from the time picker input box in Angular

Is it possible to utilize a standard button for sending data and triggering a JavaScript function in either JavaScript or PHP?

When a certain condition is met, the function can be stopped using clearInterval

Executing an ajax request following validation

Guarantee the successful execution of a server-side function using my client-side function

Discovering techniques to minimize the need for prop drilling in ReactJS component trees

Refine the Vuex state with a filter

What is stopping TypeScript from assigning certain properties to the HTMLScriptElement?