According to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise , A Promise is an object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

Think of it like a normal promise you give to someone. You may be working on something and a friend is interested in the outcome. I expect the conversation goes something like

Paul : Hey John, could you help me with this math question?

John: Okay, Let me work on it. If i manage to solve it i will email you the solution. If not i’ll call and tell you i was not able

Paul goes on to do other things and John works on the task. He makes sure he has his phone and email open in case John contacts him.

Since John is a Ninja he quickly solves the question and emails Paul the solution he came up with

The scenario above represents how promises work. They let one request something and proceed with other tasks and when the request is complete they get a result or an error.

Now lets get to the code

Promises usually take the following format

Promise((resolve,reject) => { resolve('Result'); });

resolve is used to pass the result when the operation as successful i.e

resolve('Success');

reject is used to pass the result when the operation failed i.e

reject('Error');

Lets create an JavaScript file and play and get familiar with promises. Lets call it index.js

Our goal is to do the following

  1. Write a function that returns a success promise.
  2. Write a function that returns an error promise
  3. Consume promise 1
  4. Consume promise 2

  1. Write a function that returns a success promise.

2. Write a function that returns an error promise

3. Consume promise 1

4. Consume promise 2

Notice that in the above we add a .catch method. Since already know method 2 will return an error i.e result was rejected then we expect to get the error in the catch block. Usually we never know if it will succeed or fail so its safer to use both then and catch to handle either success or error result

The file(index.js) should look as follows

function1 and function2 represents tasks that take a while. Tasks like fetching data from an api, sql queries. Tasks which take time and you don’t want then to stop all the other processes. To simulate tasks that take time lets add timeout functions to function1 and fuction2. Lets give them different durations

For function1 we’ll assume it takes 10sec and function2 takes 5sec. We’ll also introduce task 3 that takes no time at all.Lets call it function3.

Our functions will this become

We’ll call the functions in the following order function1->function2->function3

If the functions were synchronous we’d expect the results to be displayed based on the order of the funnction calls i.e result1 > result2 > result3. But that would mean the time taken would be 10+5+0 seconds. result2 would wait for result1 and result3 would wait for result2. But this is not the case thanks to promises. It will call function1, be promised a result then proceed to call function2, be promised a result then call funnction3. As soon as function1 and 2 have their results we will get it too. Its like subscribing to the result

When i ran the script i got the following results

Notice that Result3 was obtained first even though function3 was called last. Result1 was obtained last even though it was requested first

We can also look at the time taken to get the result for all the 3. We can use the javascript console.time() function to give us the duration the while script took. Lets add it to out script

we have used console.time('response in') to record the start and console.timeEnd('response in'); to record the duration

The following are the results i got when i ran the script using node

The whole process took 10ms as opposed to 15ms if they had run synchronously

Oh Promises you wonderful beauty!

Written By

Maiko

Leave a Reply

Your email address will not be published. Required fields are marked *