×


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

In the previous article, we learned about using callback for performing asynchronous operations. In ES06/ES2015, Javascript introduced something called Promises which helps you handle  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 can be called a placeholder for future data and  has 3 states

PENDING

RESOLVED

REJECTED

Immediately on creation, the state of a Promise is pendingResolved state means the asynchronous operation is fulfilled. Rejected means that the asynchronous operation is not completed and has some errors.
Many Javascript native apis for asynchronous operations support promises since ES06. Prior to that many libraries including JQuery and Bluebird were used to create promises for doing asynchronous operations.

Example for promises

JavaScript fetch method 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 that 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

 

The first promise will be successfully resolved and .then returns but the second promise will be rejected and .catch catches the 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 operations with results one dependant on others. 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 promises in the array of promises fails the whole promise, all operations fail. Consider the following example with the javascript array.map function
returns an 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 *