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!"


Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
How to define variables in SCSS (Sass)?SCSSComposing and Extracting Components in ReactReact3 JavaScript methods to use when you want to go back and forth in historyJavaScriptAll possible ways you can Insert Data in PostgresPostgresHow to create a Child Theme in WordPress?WordPressThe Difference Between the echo and print Commands in PHPPHP