Promises in JavaScript
📄 Table of Contents
- What are Promises
- Why to use Promises
- What are callbacks
- example of callback (setTimeout)
- how to create a Promise (syntax)
- consuming a created Promise using .then() & .catch()
- promise.any, promise.race, promise.all, promise.allSettled
- HTTP Interceptors
- References
▬▬▬▬▬▬▬▬▬▬▬▬▬ ✦ ✦ ✦ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
◉ Brief Introduction to Promises
Promises allow you to attach callback handlers to handle the future asynchronous success value or failure reason.
- Promises are often used to handle asynchronous tasks in JavaScript.
- Before promises were introduced natively in JavaScript, we used a lot of callbacks for asynchronous tasks.
- Promises executes code in order and must finish executing code before running the next one.
- Promises provide catch mechanism, which callbacks do not have.
- A promise will only return a value once, which means that if a promise returns an error, it will only return it once.
- A lot of developers might still think that callbacks and promises are the same, but in fact, they are not.
Promises resemble callbacks in some ways, but with an easier to follow syntax and a better understanding of the code.
Sometimes we might hear that a promise is settled. That means that this promise is either fulfilled or rejected, settled is not a state but it’s used just for convenience.
◉ Why to use Promises
1. Chaining & Order of Execution
Promise chaining is one of the things that makes promises so great and easy to use. We can execute a chain of asynchronous tasks, each task will be executed as soon as the previous task was completed.
2. Catch Mechanism
Promises are a cleaner way to run asynchronous tasks. Promises provide catch mechanism, which callbacks do not have. Promises allow cleaner, better, and functional code.
3. Remove CallBack Hell
Before diving deep into promises let’s understand what exactly is a callback.
◉ What is a Callback?
A callback is a function that is passed into another function as an argument to be executed later.
They’re so common in JavaScript that you probably used callbacks yourself without knowing they’re called callbacks. Here, is an example of setTimeout() function callback:
In the example above, setTimeout() waits for three seconds and is called after something happened (after 3 seconds passed for this example), but not before.
CallBack Hell
Now let’s imagine a scenario where you want to wait another 3 seconds after the first callback has finished, and do something. Your code will look like the following:
And now if you want to do something after the second callback has finished, you will get another nested callback:
Nested callbacks make it difficult to maintain and scale the code. In the code above, we have three levels of nested functions, one for each setTimeout() call. Having an application with tens of nested callbacks will make the developers live hell to update or even understand the code. Such a situation is referred to as callback hell.
That’s where the JavaScript promises come into the picture.
◉ 3 states of Promises
Promises are NOT meant to replace the callbacks. Instead, they simplify the chaining of functions, making it easier to read and maintain the code.
A promise can be in one of the following states:
Three States of Promise
Pending → Before the result is ready, a promise is in a pending state.
Fulfilled → If the result is available it becomes fulfilled
Rejected → If an error occurs, the promise is rejected.
If a promise is not pending i.e it is either fulfilled or rejected, we say it has been settled which means it cannot change its state. That means a promise which has settled remains in that state forever. Once settled, a promise can not be re-settled.
◉ Creating a Promise
To create a promise in JavaScript, you use the Promise constructor:
const myPromise = new Promise();It takes two parameters, one for success (resolve) and one for fail (reject):
const myPromise = new Promise((resolve, reject) => {
// condition
});Inside the Promise, you manually call the resolve() function if the promise is completed successfully and invoke the reject() function in case an error occurs.
let completed = true;
const myPromise = new Promise((resolve, reject) => {
if(completed) {
resolve('Promise is resolved successfully.');
} else {
reject('Promise is rejected');
}
});After executing the above promise in the browser console you will see that the promise is resolved because the completed variable is set to true
To see the pending state of the promise, we wrap the code of the Promise in the setTimeout() function:
let completed = true;
const myPromise = new Promise((resolve, reject) => {
setTimeout(() => {
if(completed) {
resolve('Promise is resolved successfully.');
} else {
reject('Promise is rejected');
}
}, 3000)
});Now, you see that the promise starts with the pending state with the value is undefined. The promise value will be returned later once the promise is completed.
After about 3 seconds, type myPromise in the console window, you will see that the state of the promise becomes resolved and the promise value is the string that we passed to the resolve() function.
If you change the value of the completed variable to false and run the promise again you will see an error message and the state of the promise becomes rejected after 3 seconds:
◉ Consuming a Promise: then, catch, finally
1) .then() method
The then() method is used to schedule a callback to be executed when the promise is successfully resolved.
For example, let’s log the message to the console that we got from the Promise:
2) .catch() method
If you want to schedule a callback to be executed when the promise is rejected, you can use the catch() method of the Promise object:
So if the promise gets rejected, it will jump to the catch() method and this time we will see a different message on the console.
3) .finally() method
Sometimes, you want to execute any piece of code whether the promise is fulfilled or rejected.
The finally() method is called once the promise is settled irrespective of whether it is resolved or rejected.
◉ promise.race, any, all, allSettled
The native Promise object has some extra stuff you might be interested in:
Promise.any
The Promise.any method takes an array of Promises and will return as soon as the first one is Fulfilled.
Promise.race()
Promise.race() method accepts a list of promises and returns a promise that fulfills or rejects as soon as there is one promise that fulfills or rejects, with the value or reason from that promise.
This is very similar to the
Promise.anymethod, however, it has one key difference. WhilePromise.anywill return only if one of the promises is Fulfilled,Promise.racewill return if any of the promises are Settled.
Promise.all()
Promise.all() method is useful to execute multiple promises in parallel and waits until all of them are ready. It takes an array of promises as an input and returns a single promise, that resolves when all of the promises get resolved or any one of them gets rejected.
Promise.all() takes in an array of promises as an input and then resolves the output as an array of results of the input promises. Note that the output of the promises array will be in the same order as that of the input Promises array. It rejects immediately upon any of the input promises rejecting or non-promises throwing an error, and will reject with this first rejection message
Promise.allSettled()
Promise.allSettled() method wait’s until all promises have settled (each may resolve or reject). Returns a promise that resolves after all of the given promises have either resolved or rejected, with an array of objects that each describe the outcome of each promise.
Chaining Promises in JavaScript :
Well, now that we have understood enough about promises, let’s try to understand promise chaining.
Before we continue, one must understand that each .then() , .catch() and .finally() method of the Promise object return a new Promise which can be optionally used for chaining. Let’s try to quickly understand chaining with the help of an example.
Example Code 5.
Since the .then() method returns a promise, there is another .then() method attached with the new Promise. The resolved result of the new Promise will be the argument of the new .then() method in the chain. Hence, this can be used to execute a chain of promises in sequential order.
◉ Switching from Traditional approach to Promises
source: https://ardodeardo.medium.com/javascript-es6-awesome-62df9082076
Have you ever running multiple function but you’re not sure if the other process is finished one after another? or maybe you want to start calling a function right after another asynchronous process is done? well, you might use callback but is there another way to handle this kind of thing? check this out:
key points:
callbackis passing another function into the argument- nesting a lot of callback might be painful. it could causing callback hell
◉ HTTP Interceptors
This section has less to do with promises but is a handy axios feature. HTTP interceptors come in handy when you need to examine or change HTTP requests from your application to the server or vice versa (e.g., logging, authentication, etc.)
The interceptors run before you make HTTP request via axios.
Summary
- A promise is an object that returns a value in the future.
- A promise starts in the pending state and ends in either a fulfilled state or a rejected state.
- Use
then()method to schedule a callback to be executed when the promise is fulfilled, andcatch()method to schedule a callback to be invoked when the promise is rejected. - Place the code that you want to execute in the
finally()method whether the promise is fulfilled or rejected.
References:
for very easy understanding refer to
https://levelup.gitconnected.com/understanding-javascript-promises-5040a634c474
