The promise in JavaScript provides a convenient way to organize asynchronous code. JavaScript Promise API completely changed the JavaScript asynchronous programming and it becomes very easy to understand.
Today, I am going to discuss JavaScript Promise API and how you can use in real time application. This post contains a comprehensive description of the JavaScript Promise API and is provide the idea about API to the beginner front-end developers. Also, it will help to those who are quite familiar with the concept of JavaScript Promise API but has not yet used the JavaScript Promise API in real time application.
What is Promise in JavaScript?
A promise is an object used to perform deferred and asynchronous calculations in JavaScript. You can also say the promise is an object which contains its state.
A Promise is in one of three states:
- Pending: initial state, non-fulfilled or rejected.
- Fulfilled: a successful operation.
- Rejected: failed execution.
A Promise properties can have two kinds of callbacks:
- onFulfilled- Trigger when promise in a state of a successful operation.
- onRejected- Trigger when promise in the failed state.
What is the basic use of Promise API?
A JavaScript Promise object is created using the new Promise() operator and the promise gives you resolve and reject parameters for the callback. You can fulfill the promise callback set using then() method.
SYNTAX
1 2 3 |
A JavaScript Promise API is represented as a proxy for a value that is not known when the promise is created. It allows you to associate the handlers with the final success or failure status of an asynchronous request which makes the asynchronous method return as if it were a synchronous method returns a promise that has a value at a future moment to replace the final return value.
The pending promise state can either in a fulfilled state with a returned value or in rejected state with a failed reason. In any state occurs in promise, the corresponding handlers queued up by a promise’s then method are called. There is no race between the completion of the asynchronous operation and the binding of its handler as the handler will be called if the promise is already in the done or rejected state corresponding handler is attached.
A universal method for attaching handlers:
JavaScript Promise() constructor accepts a function as a parameter, which passes the two variables of the callback function to resolve and reject.
1 2 3 | promise.then(onFulfilled, onRejected) |
Parameters
- onFulfilled- a function that will be called with the result of resolve.
It can be used to assign both handlers immediately, and only one:
1 2 3 4 5 6 7 | // onFulfilled will work if successful promise.then(onFulfilled) // It will trigger an error OnRejected promise.then(null, onRejected) |
What are the methods in JavaScript Promise API?
JavaScript Promise API has six methods to work and all the methods work in latest browsers like Chrome, Opera, and Firefox. Let’s understand the JavaScript Promise API methods
1. Promise.all (iterable)
This method accepts an array or other iterable elements and returns the fulfilled if all of the promises in the iterable argument have fulfilled, all transmitted Promise completed, and goes into the “done” with an array of results or rejects as soon as any of the promises in the iterable argument rejects. Failure value corresponds to the value of the first element concluded failure.
Note: Currently only implemented in Chrome and Opera
2. Promise.resolve (thenable);
This method creates a thenable new promise(). Thenable is an object which contains a “then” method. This method also creates a new promise object.
Promise.resolve (obj) ;
This method returns the object as http://result.it returns a new Promise which is in the resolved state with the resolved value.
3. Promise.reject (obj);
This method returns a new Promise which is in the rejected state with the rejected error. It is useful for code consistency and debugging purpose.
4. Promise.race (iterable);
This method creates a new Promise which will be resolved when the first of promises is resolved. If any promise is rejected before any resolve, the returned Promise will be rejected immediately and will provide the value of the Promise that was rejected.
Example:
The following is a simple implementation of the Promise API in JavaScript. Let’s understand the below code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html> <html lang="en"> <head> <script type="text/javascript"> function ReadCustomAttribute(){ var promise = new Promise(function(resolve, reject) { var namefield = document.getElementById('name'); var age = namefield.getAttribute('data-age'); if(age == 20) {// if condition is true resolve('Success!'); } else { reject('Failure!'); } }); promise.then(function() { /* do something with the result - resolve method will call then callback*/ }).catch(function() { /* reject method will call catch callback */ alert('in error'); }) } </script> </head> <body onload="ReadCustomAttribute();"> <input type="text" name="name" data-age="20" data-id="user-1" id="name"/> </body> </html> |
The above code explains how promise API works in JavaScript and why JavaScript Promise API required to use. In this example, I have taken object Promise and used code in that so promise will handle it if condition matched successfully or failed. Here, the Promise.resolve static method simply returns a promise as a positive result and reject will generate a negative result.
This is a very basic example but the actual use of the promise is very complex, often require multiple asynchronous tasks interspersed with the implementation of parallel or serial with the same.
In modern JavaScript development, complex chains with Promise API are rarely used, because they are much easier to describe but an implementation is very difficult. I can say that Promise API is more advanced ways of asynchronous development.
That’s it. Have you ever used JavaScript Promise API? and if you find this post helpful, share it with your friends and colleagues!
