Javascript Promises API

Introduction to Javascript Promises API

A Promise is a value not necessarily known at the time of it’s creation. It mainly used in asynchronous actions resulting in success or failure. The Promises represents a value which may be available now, or in the future, or never.

Promises

new Promise(function(resolve, reject) {

}).then(function() {

}).catch(function() {

});

then() and catch() are prototype methods and they can ben chained as shown above. A Promise will always be either “Pending” or “Fulfilled” or “Rejected”.

  • Pending – Initial state, operation not started yet.
  • Fulfilled – Operation completed.
  • Rejected – Operation failed.

While synchronous code is easy to understand but sometime it leads to bad performance and not flexible enough as compared to asynchronous code. With async we can trigger more then one request unlike in sync and moreover the code will be clean & clear to understand.

new Promise(function(resolve, reject) { 
	setTimeout(function() { resolve("Ashish"); }, 3000);
}).then(function(str) {
	console.log('First output: ', str); return num + " Panchal";
}).then(function(str) {
	console.log('Second output: ', str); return num + " Panchal from India.";
}).then(function(str) {
	console.log('Third output: ', str);
});

// Output will be like:
// First output : Ashish
// Second output: Ashish Panchal
// Third output : Ashish Panchal from India.

Methods

Promise.all()

Returns a Promise once all the requests passed will resolves and rejects if any of the promises rejects. Let’s assume you have multiple requests and you want a callback only when all the requests resolve or rejects. Here comes the Promise.all(). It takes an Array of promises and fire one callback only when they all are resolved.

Promise.all( [promise1, promise2] ).then(function(results) {
	// Code which runs only when all promises resolves
}).catch(function(error) {
	// Code which runs only when promises rejects
});

Promise.race()

Returns a Promise as & when any of the requests resolves. Unlike Promise.all(), this doesn’t wait to resolve all the requests passed as an Array in the Promise.race(). As soon the promise resolves it returns value from that promise. Syntax for this is same as above.

Promise.race( [promise1, promise2] ).then(function(results){
	// Code which runs only when all promises resolves
}).catch(function(error){
	// Code which runs only when all promises resolves
});

We can also use resolves() and reject() separately to get things done.

Promise.resolve(function(){
     // Code to run once the Promise resolve
});

Promise.reject(function(){
     // Code to run once the Promise rejects
});

Conclusion

Now a days Promises API is getting into limelight and more & more developers are using in their projects. It’s bit hard to understand but once you get on with it, it will become habit to use in project.

Useful Link – Mozilla Developer Network

Web/ UI & Front-end developer based in Ahmedabad, GJ, India. Here to help/ discuss community to spread web awareness.

1 comments On Introduction to Javascript Promises API

Leave a reply:

Your email address will not be published.