Javascript

Explore

Javascript

Promises

A Promise is an object that represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

In simple words, A Promise is a placeholder for a value that is not available yet, but will be resolved (or rejected) in the future.

The constructor syntax for a promise object is:

let promise = new Promise(function(resolve, reject) {

// executor (the producing code, "singer")

});

Executor

The function passed to new Promise is called the executor.

When new Promise is created, the executor runs automatically.

Its arguments resolve and reject are callbacks provided by JavaScript itself.

When the executor obtains the result, be it soon or late, doesn’t matter, it should call one of these callbacks:

resolve(value) — if the job is finished successfully, with result value.

reject(error) — if an error has occurred, error is the error object.

Internal properties of Promise object

The promise object returned by the new Promise constructor has these internal properties:

state — initially "pending", then changes to either "fulfilled" when resolve is called or "rejected" when reject is called.

result — initially undefined, then changes to value when resolve(value) is called or error when reject(error) is called.

⁠

Screenshot 2025-04-06 at 11.30.12 PM.png

⁠

Example

⁠

Screenshot 2025-04-06 at 11.32.51 PM.png

⁠

Consumers: then, catch

A Promise object serves as a link between the executor and the consuming functions, which will receive the result or error. Consuming functions can be registered (subscribed) using the methods .then and .catch.

then

The most important, fundamental one is .then.

The syntax is:

promise.then(

function(result) { /* handle a successful result */ },

function(error) { /* handle an error */ }

);

The first argument of .then is a function that runs when the promise is resolved and receives the result.

The second argument of .then is a function that runs when the promise is rejected and receives the error.

For instance, here’s a reaction to a successfully resolved promise:

let promise = new Promise(function(resolve, reject) {

setTimeout(() => resolve("done!"), 1000);

});

// resolve runs the first function in .then

promise.then(

result => alert(result), // shows "done!" after 1 second

error => alert(error) // doesn't run

);

The first function was executed.

And in the case of a rejection, the second one:

let promise = new Promise(function(resolve, reject) {

setTimeout(() => reject(new Error("Whoops!")), 1000);

});

// reject runs the second function in .then

promise.then(

result => alert(result), // doesn't run

error => alert(error) // shows "Error: Whoops!" after 1 second

);

catch

If we’re interested only in errors, then we can use null as the first argument: .then(null, errorHandlingFunction). Or we can use .catch(errorHandlingFunction), which is exactly the same:

let promise = new Promise((resolve, reject) => {

setTimeout(() => reject(new Error("Whoops!")), 1000);

});

// .catch(f) is the same as promise.then(null, f)

promise.catch(alert); // shows "Error: Whoops!" after 1 second

Cleanup: finally

Just like there’s a finally clause in a regular try {...} catch {...}, there’s finally in promises.

The call .finally(f) is similar to .then(f, f) in the sense that f runs always, when the promise is settled: be it resolve or reject.

The code may look like this:

new Promise((resolve, reject) => {

/* do something that takes time, and then call resolve or maybe reject */

})

// runs when the promise is settled, doesn't matter successfully or not

.finally(() => stop loading indicator)

// so the loading indicator is always stopped before we go on

.then(result => show result, err => show error)

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.