Promises in Javascript

What is a promise

MDN definition — The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.

A promise in javascript is similar to a promise in real life.

• A promise in javascript and real life is an agreement that sets an expectation that something will be done
• A promise can either be kept or broken.
• When a promise is broken, you expect to find out why the promise was unable to be kept, so you can take an action.
• When a promise is kept you expect to receive what was promised.

What is the point of a Promise in Javascript and how does it work

Promises are mainly used for easier handling of asynchronous operations or blocking code e.g API calls and Database calls.

There are three statuses to the Promise in javascript

• Pending = The initial state of a promise.
• Resolved = The state of a promise representing a successful operation (eg. promise has been kept.
• Rejected = The state of a promise representing a failed operation.

How to Create a Promise

The following is the syntax required to create a new promise.

new Promise(function(resolve, reject) { ... } );

Example 1

• In this example I have created a variable called “TheSecretWasKept” and have set it to equal true.
• I then created a new promise which tests wether the secret has been kept or not.

var TheSecretWasKept = true;
secret = new Promise(function(resolve, reject) {
  if (TheSecretWasKept) {
    resolve("I can trust this person with my secrets");
  } else {
    reject("I cant trust this person with my secrets. ");
  }
});
console.log(secret);

Example 1 Result

• As you can see the promise has been kept, and in the console the promise shows as “resolved”.
• The console also shows the value of resolved promise

Example 2

And now because I have set the variable “TheSecretWasKept” to false…

var TheSecretWasKept = false;
secret = new Promise(function(resolve, reject) {
  if (TheSecretWasKept) {
    resolve("I can trust this person with my secrets");
  } else {
    reject("I cant trust this person with my secrets. ");
  }
});
console.log(secret);

Example 2 Result

… The console shows that the promise has been rejected.

Promise Prototype Methods

• Promise methods are a way to chain your code together based on the success or failure of the promise being kept.
• The Methods will be triggered based on the result of the promise.
• This is an easier and cleaner way to chain your code together without using callbacks which can get messy and can lead to Callback Hell.
• There are three types of Promise Prototype Methods.

Then

• Is a method that springs to life if a promise has been kept

Catch

• Is a method that springs to life if the promise has not been kept.

finally

• Is a method that runs regardless of the result.

Story Example

• In this example a promise has been created with a mothers promise of buying a phone for her son.
• I have created 3 Promise Prototype Methods to respond to the results of the promise.

var momsPromise = new Promise(function(resolve, reject) {
  momsSavings = 20000;
  priceOfPhone = 60000;
  if (momsSavings > priceOfPhone) {
    resolve({
      brand: "iphone",
      model: "6s"
    });
  } else {
    reject("We don't have enough savings. Let us save some more money.");
  }
});
momsPromise.then(function(value) {
  console.log("Hurray I got this phone as a gift ", JSON.stringify(value));
});
momsPromise.catch(function(reason) {
  console.log("Mom coudn't buy me the phone because ", reason);
});
momsPromise.finally(function() {
  console.log(
    "Irrespecitve of whether my mom can buy me a phone or not, I still love her"
  );
});

Result

• As you can see because “momsSavings” isn’t enough to pay for the Iphone so the promise has been rejected and has triggered the catch method.
• It has also triggered the “finally” method witch triggers regardless of the result.

Happy story

To give the story a happy ending I have made a donation to the family so that the mother can buy the phone for her son.

var momsPromise = new Promise(function(resolve, reject) {
  momsSavings = 200;
  priceOfPhone = 700;
  roriDonation = 600;
if (momsSavings + roriDonation > priceOfPhone) {
    resolve({
      brand: "iphone",
      model: "6s"
    });
  } else {
    reject("We donot have enough savings. Let us save some more money.");
  }
});
momsPromise.then(function(value) {
  console.log("Hurray I got this phone as a gift, thank you Rori");
});
momsPromise.catch(function(reason) {
  console.log("Mom coudn't buy me the phone because ", reason);
});
momsPromise.finally(function() {
  console.log(
    "Irrespecitve of whether my mom can buy me a phone or not, I still love her"
  );
});

Result

• And as you can see the this has triggered the “then” method meaning the son can get the value of the promise.
• And again the “finally” method has been triggered again because it triggered regardless of the result.