Understanding Promises in JavaScript : asynchronous behaviour of Javascript Part -2

July 31, 2018

In the previous article we learned about using callback for processing asynchronous requests.In ES06 Javascript introduced something called Promises which helps you deal with asynchronous operations in a better way
The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.
Promises provide a better way for managing asynchronous operations when compared to traditional callback-based way.
Promises represent data that may not be available but will be available later upon completing some asynchronous operation.A promise has 3 states

PENDING

RESOLVED

REJECTED

Immediately that state of a Promise is pending.Resolved state means the asynchronous operation is fulfilled.Rejected means that the asynchronous operation was not completed and have some errors.
Many Javascript native apis for asynchronous operations support promises since ES06 .Prior to that many libraries including JQuery provided us promises for doing asynchronous operations.

Example for promises

Javscript fetch operation returns a promise.

You can see that immediately the state of promise is pending.Now for resolving the promise and getting the output

Promise.prototype.then() and Promise.prototype.catch()

Promise.prototype.then() and
Promise.prototype.catch()

The promise object has a then method which returns the promise and a catch method which catches the error.See the following set of examples,first on promise fulfill and second on error catching.For making an error we give a false url for the second  fetch request.

See the below image after doing a console.log(promise) .The prototype has .catch and .then methods. Resolve  and reject callbacks of the promise  maps to .then and .catch.

Example- .catch and .then

 

First promise will be successfully resolved and .then returns but the second promise will be rejected and .catch catches error

 

The Promise constructor – Creating custom Promise of your own.
Many Javascript apis and libraries return promises .For example While working with Node.js and Mysql, ORM like sequelize returns promises.But what about creating custom promises of your own.To create custom promises we can use Promise constructor.The promise constructor is primarily used to wrap functions that do not already support promises.

Promise constructor has a function with arguments resolve and reject.resolve is called when the asynchronous operation is resolved and reject is called when the asynchronous operation has some error.

 

Now see the following example with ajax request ,with a custom promise

 

Chaining promises

Promises can be chained one within the other to execute multiple asynchronous operation with results one dependant on other.See the following example with promise chained one within the other to get jokes from the icndb api to get two jokes .

 

Promise.all

Promise.all resolves an array of promises.If one of the promise in the array of promises fails the whole promise.all is rejected.Consider the following example with the javascript array.map function
returns array of promises which gets resolved with promise.all(Promises) in Node.js

 

 

Promises and Promise Chaining -Diagram

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

2 Comments

Leave a Reply

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