Introduction to Promises in JavaScript
What are Promises?
Promises are a pattern of writing Asynchronous Code.
Promise is an object which represents the eventual success or failure of something which takes time(For Example- An asynchronous operation).
The promise object in JavaScript has 4 states :-
1. Fulfilled : Operation completed.
2. Rejected : Operation Rejected.
3. Pending : Initial State i.e waiting to be fulfilled or rejected.
4. Settled: the promise has been fulfilled or rejected
Why is it helpful?
Promises are important because when there are multiple asynchronous operations we may find ourselves in a situation called Callback Hell and moreover the code becomes difficult to maintain. With Promises, we attach callbacks instead of passing them hence the code looks cleaner and easier to maintain.
What is the difference between Callbacks and Promises?
We attach callbacks to promises, We don’t pass in callbacks into a function.
How to Create a Promise?
Promise object can be created using the Promise() constructor.
Promise() constructor takes one argument i.e a callback function. The callback function itself takes two arguments resolve and reject which themselves are functions.
If Operation specified in the callback function is successful, we resolve (with or without a value) else we reject.
Syntax to create a Promise:-
const prom = new Promise((resolve,reject) =>{
//Some Operation
});
How to Interact with Promises?
We learnt how to create a promise and now we are going to understand how to interact with promises, how to run code when a promise is resolved or a promise is rejected.
Every Promise has a .then() method which includes a callback for when the resolve() function executes.
And a .catch() method for when reject() method executes or to handle an error.
then() : This method is automatically invoked when the promise is resolved.
Promise.then(()=>{
//Do something
});
.catch() : This method is invoked when the promise is rejected.
Promise.then(()=>{
//Do Something
});
Example : Lets say if you score above 70 in Mathematics, you get a phone else you have to try again.
Code Snippet :-
Output :-
Explanation :-
willYouGetAPhone Promise object is created and it is fulfilled because the condition that Marks in Mathematics should be greater than 70 is successful. Accordingly the resolve() method executes. .then() method automatically runs when a promise is resolved and hence, the Output : Congrats! You get a Phone is printed on the console.
Note : If MathsMarks had been less than 70, .reject() will have executed and accordingly .catch() will run and hence, the Output : Try Again Next Semester
Conclusion :-
This was just a brief overview of Promises in JavaScript and stresses on how easily Asynchronous code can be handled with the help of Promises.
For any doubts and suggestions, you can reach out to me on LinkedIn .
If you like the article, Do give a 👏.
