What is a Promise?

A promise is one of the most important parts of ES6. It is an essential part of asynchronous programming. At first glance, they can be a little hard to understand, however I will attempt to make them a little bit clearer.

How do Promises Work?

As I stated earlier, promises are asynchronous. They do not execute code from the top to bottom. Instead, they eventually return a value back to us after the code is done executing. Promises allow you to write much cleaner code instead of having a bunch of nested functions and callbacks.

Basic Syntax of a Promise

var promise = new Promise(function(fulfill, reject) {

});

Here, we created the basic “skeleton” of a promise. As you can see, a promise takes a callback function with two parameters (fulfill and reject). This represents the two states of a promise. It can either be fulfilled or rejected. Once it is fulfilled, it can not be rejected and vice-versa.

Promises in depth

Let’s look at the following code snippet:

//Simple function that returns a promise if a value is true or not.
function checkIfTrue(name,value) {
  //Construct the promise
  var promise = new Promise(function(fulfill, reject) {
    //If its true, fulfill it
    if (value===true) {
      fulfill(name + " IS TRUE AND FULFILLED THE PROMISE!");
    }
    //If false, reject it
    else if (value===false) {
      reject(new Error(name + " IS FALSE AND WE REJECTED THE PROMISE!"));
    }
  });
  return promise;
}

//Function for fulfilled promises
function onFulfilled(value) {
  console.log(value);
}
//Function for rejected promises
function onRejected(error) {
  console.log(error.message)
}

var trueValue = checkIfTrue("trueValue",true);
trueValue.then(onFulfilled,onRejected);
//Outputs: trueValue IS TRUE AND FULFILLED THE PROMISE!

var falseValue = checkIfTrue("falseValue",false);
falseValue.then(onFulfilled,onRejected);
//Outputs: falseValue IS TRUE AND REJECTED THE PROMISE!

First we are going to create a simple function checkIfTrue() that as you could probably guess, checks if a value is true. It takes 2 parameters (name and value). The name will just be used to identify which function call is which, while the value will actually contain the true/false value.

Inside checkIfTrue() first we construct our promise. If the value is true, we fulfill the promise. Else, we reject the promise. Then, we return the promise object.

On line 18 and 22, we create our onFulfilled() and onRejected() functions. These will be used later.

On lines 26 and 30 we set the values of two variables, trueValue and falseValue to two separate function calls to checkIfTrue().

The way you access the value of the promise is by using the .then() method. This takes two parameters as well (the function to be called on a fulfilled promise and a rejected promise). Here, we use onFulfilled() and onRejected().

Running the script will produce:

trueValue IS TRUE AND FULFILLED THE PROMISE!
falseValue IS FALSE AND WE REJECTED THE PROMISE!

We have now learned the basics of ES6 Promises!