dots Created with Sketch.
Yogesh Chauhan's Blog

What is a “promise” in JavaScript?

in JavaScript on April 24, 2021

A JavaScript standard class Promise is asynchronous action that might get completed at a certain point and produce a success or failure. It notifies when the value is available.

How to create a promise?

Quick and easy way to do it to call Promise.resolve to create a promise and get a value wrapped in a promise. You can also create a constructor.

If it’s a promise then you get the value returned and if not, it creates a new promise with the passed value as it’s result.

After that you can use then method to get the result of the promise. then method registers a callback function which gets called when the promise resolves and at the end it produces a value.

A promise is a kinda assurance that you’ll get some value in the future.

Example


let greet = Promise.resolve("hello");
greet.then(value => console.log(`Saying ${value}`));
// "Saying hello"

Promise states

A pending state is an initial state which indicates that the result is still pending, it’s not fulfilled or rejected. Other two states are fulfilled (operation completed successfully) and rejected (operation failed).

Can you add multiple callbacks to a single promise?

Yes, you can add multiple callbacks to a single promise.

In fact, you can add then even after the promise has been completed. All callbacks will be called.

then method can return another promise and the value the handler function returns and the loop continues. So, if the handler function returns another promise then it’s going to wait till that promise resolves a value.

Promise as a constructor

We can also use Promise as a constructor which expects a function as an argument.

A simple example


const greet = new Promise((resolve, reject) => {
    resolve('hello');
});

greet.then((value) => {
  console.log(`Saying ${value} again!`);
});

// "Saying hello again!"

Promise constructor with setTimeout


let promiseEx = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve("Promise request resolved!");
  }, 1000);
});

promiseEx.then(function(value) {
  console.log(value);
});

//"Promise request resolved!"

amazon

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Jul 22 Is there a CSS parent selector? #Jul 22 Difference between :where and :is in CSS #Jul 22 Does :is() pseudo selector hint at CSS preprocessing in the future? #Jul 22 Control Scrolling with CSS Scroll Snap #Jul 21 Control rendering using CSS content-visibility property #Jul 21 How to use @supports rule in CSS?
You might also like these
Common Table Expressions (CTE) in PostgreSQLPostgresObject destructuring in JavaScript: Unpacking fields from objects passed as function parameterJavaScriptWordPress: How to print ACF array field values?WordPressFunction Scope in JavaScript for BeginnersJavaScriptAmpersand (Parent Selector) in SCSS (Sass)SCSSHow to create Glowing Text using CSS?CSS