What are promises

Promises are a way to handle asynchronous tasks in javascript, in a situation where you need to stop execution before executing another function or a block of code. Promises are integrated into many libraries and frameworks that simplify working with them, however, knowing how promises work and being able to write your own will improve your code quality.

Core benefits

  • Cleaner code (your colleagues will thank you)
  • Robust codebase
  • Better error handling
  • Easy and intuitive handling of asynchronous operations

A Promise is simply an object that expects a function with two parameters:

  1. Function to execute if successful
  2. Function to execute if unsuccessful (error)

Writing your first promise

To write your first promise, create a variable myFirstPromise and assign to it an object (Promise) using the new keyword.

let myFirstPromise = new Promise();

Now, as stated previously, a promise expects a function with two parameters, so let’s add a function parameter to the Promise() object.

let myFirstPromise = new Promise(function(){

});

Furthermore, the function we have now added as a parameter to our promise expects two additional parameters:

  1. Function to execute if successful – myResolve()
  2. Function to execute if unsuccessful – myReject()
let myFirstPromise = new Promise(function(myResolve, myReject){

});

We have successfully created a promise variable, however, it is still not quite complete as we need to add logic as to when each function is executed.

let myFirstPromise = new Promise(function(myResolve, myReject){

let x = 0;

// The producing code (this may take some time)

  if (x == 0) {
    myResolve("OK");
  } else {
    myReject("Error");
  }

});

The promise is now complete but let’s take it step by step to explain what each line of code does. What we’ve added in this step is the logic of the promise – it needs to know what to wait for and what to do in case of success/failure.

The first thing we’re doing here is declaring a variable x and assigning it a value of 0. This part of the function would normally include a network request. Let’s imagine that we have loaded this value from a server and assigned it to our variable x.

Once we have our value assigned to a variable (x), then the if/else statement comes to play. In this simple example, we’re checking if the value of x is zero, or not. If it is zero, then the promise resolves as successful (and returns “OK”) and if it is not zero, the promise is rejected and we return a string “Error”.

Now that we have successfully created our first promise, let’s try to use it and see how it works in action.

let myFirstPromise = new Promise(function(myResolve, myReject){

let x = 0;

// The producing code (this may take some time)

  if (x == 0) {
    myResolve("OK");
  } else {
    myReject("Error");
  }

});

myFirstPromise.then(
  function(value) {console.log(value);},
  function(error) {console.log(error);}
);

We have now added the function myFirstPromise.then(). Promise.then() takes two arguments, a callback for success and another for failure. In both cases, we log the value to the console using console.log().

Leave a Reply

Your email address will not be published.