JavaScript is a single-threaded or synchronous programming language but with promises we can make it look like multi-threaded or asynchronous programming language. Imagine a function waiting for a network request to complete which takes more time. Meanwhile entire execution freezes at that time we need asynchronous operations. Prior to promises, events and callback functions are used. But events and callback functions create callback hell and can lead to unmanageable code. It is not easy to handle multiple callbacks at a time. Events are not good in asynchronous operations. So obviously, promise became the best choice for handling asynchronous operations.
In JavaScript, promise is a way of handling asynchronous operations. It is an object that holds the future value of an asynchronous operations. It is helpful in finding out whether a asynchronous operation is successfully completed or not.
Benefits of Promises:
- Improves code readability.
- Better at handling multiple callback functions at the same time and avoiding callback hell situation.
- Better control flow in asynchronous logic
- Improves error handling
Difference between promises and event handlers:
- A promise can never fail or succeed twice. It can be only once.
- A promise can never switch from success to fail or fail to success.
Promise has three states:
- Pending
- Fulfilled
- Rejected
Pending – Initial state. A promise starts here.
Fulfilled – If operation was successful ends in fulfilled state.
Rejected – If operation was fail ends in rejected state.
A promise is settled if it is either fulfilled or rejected but not pending.
Create a promise:
To create a promise we use constructor Promise()
let promise = new Promise(function(resolve,reject){
//do something
});
Promise() constructor takes function as an argument. This function accepts two functions resolve() and reject(). If promise is successful returns resolve() function and by failure returns reject() function.
Example:
const count = true;
let countVal = new Promise(function (resolve, reject) {
if (count) {
resolve("There is a count value.");
} else {
reject("There is no count value");
}
});
console.log(countVal);
Output:
Promise { ‘There is a count value.’ }
In above example promise is resolved if count is true.
JavaScript Promise chaining:
Promises are useful in handling more than one asynchronous task one after another. For that we have promise chaining. We use then(), catch() and finally() methods.
JavaScript then() method:
then() method is used with callback when promise is successfully fulfilled or resolved.
Syntax:
.then(function(result){
//handle success
}, function(error){
//handle error
})
Example:
new Promise(function(resolve, reject) {
setTimeout(() => resolve(1), 1000);
}).then(function(result) {
console.log(result);
return result * 3;
}).then(function(result) {
console.log(result);
return result * 4;
}).then(function(result) {
console.log(result);
return result * 6;
});Output:
1
3
12
Here all operations returns the result to the next then on the chain and this continues till last element and final result is returned.
JavaScript catch() method:
catch() is used when a promise is rejected or if an error occurs. It is used as error handler whenever at any step there is chance of getting error.
Syntax:
.catch(function(error){
//handle error
})
Example:
// returns a promise
let countValue = new Promise(function (resolve, reject) {
reject('Promise rejected');
});
// executes when promise is resolved successfully
countValue.then(
function successValue(result) {
console.log(result);
},
)
// executes if there is an error
.catch(
function errorValue(result) {
console.log(result);
}
);
Output:
Promise rejected.
| Method | Description |
| Promise.all() | Waits for all promises to be resolved or any one to be rejected |
| Promise.allSettled() | Waits until all promises are settled |
| Promise.any() | Returns the promise value as soon as any one of the promises is fulfilled |
| Promise.race() | Wait until any of the promises is resolved or rejected |
| Promise.reject() | Returns a new Promise object that is rejected for the given reason |
| Promise.resolve() | Returns a new Promise object that is resolved with the given value |
| catch() | Appends the rejection handler callback |
| then() | Appends the resolved handler callback |
| finally() | Appends a handler to the promise |