(click anywhere to close)

[JavaScript] Promises

category: Website | course: Advanced Javascript | difficulty:

One of the big issues within programming, is asynchronous code. Code is meant to be executed synchronously, one statement after each other, in a logical order. So, what do we do if we have to wait for something to finish? What if we have to wait for the server to respond before we can load a page?

In the old days, we’d use a long and complex chain of callbacks, which is often referred to as callback hell. We’d put functions inside functions inside functions, which all had to wait for some event to occur before they could execute another part. With promises, we can climb out of this hell!

A promise has four states:

  • Pending: The promise hasn’t been fulfilled or rejected yet
  • Fulfilled: The action relating to the promise succeeded.
  • Rejected: The action relating to the promise failed.
  • Settled: The promise has been fulfilled or rejected

One very important thing to understand, is that once a promise is settled, it will never change. A promise can only be fulfilled once or rejected once, and that’s where it ends.

Essentially, a promise is a reference or link to a certain action. Once that action has finished, it goes looking for the promise again itself, and communicates whether it succeeded or failed. The promise will act on that accordingly. The name, therefore, comes from the fact that the action you’re executing promises you that it will tell you if it receives a value sooner or later.

The syntax for creating one is

new Promise(function(resolve, reject) { statements } )

Within the function body you can perform whatever action you want to do. If everything worked out fine, you can call resolve(message). If not, call reject(message).

var promise = new Promise(
	function(resolve, reject) {
		//Do some things, possibly asynchronous

		if(x === undefined) {
			//Things went wrong
			reject("x was undefined!");
		} else {
			resolve("The value is " + x);			


If you’re only looking at what to do when a promise is fulfilled, you can simply use return for your message.

Reacting to Promises

Such a promise is great, but it is meaningless now, as we’ve only used a constructor. If we want to use it, we need to call the

then(succesFunction, failureFunction)

method on it. If the promise is resolved, it executes the first function, if it failed, the second one. The messages you wrote when you constructed your promise are supplied as the only parameter for these functions.

promise.then(function(result) {
	console.log(result); //Will print "The value is " + x 
}, function(error) {
	console.log(error); //Will print "x was undefined!"

Chaining Promises

Instead of simply resolving to a value, we can also resolve a promise to another promise. With the then() method now available to us, we can simply chain these promises, which shows their real power.

function someFunction(resolve, reject) {

var promise = new Promise(function(resolve, reject) {
  resolve(new Promise(someFunction));

promise.then(function(val) {
  return val;
}).then(function(val) {
  console.log(val); // 10

You can also chain values, but that would completely destroy the whole purpose of promises, as there is no time delay.

If this syntax still seems convoluted to you, it’s possible to use then() only for successes, and catch() for failures.

promise.then(function(result) {
}).catch(function(error) {
Do you like my tutorials?
To keep this site running, donate some motivational food!
Chocolate Milk