Javascript Promises

Prerequisite :-
a. ) Basics of Javascript.
b. ) Fat arrow syntax of JS Functions

Some basics of Promises :-

a. ) In the initial phase the promises are in a pending state , there are neither fulfilled nor rejected.
b. ) When any asynchronous operation or any operation completes , the promise will become fulfilled with a value.
c. ) When the required operation fails , the required promise gets rejected with an error.

PROMISE — — asynchronous operation — → FULFILLED (fulfilled state)
(Pending state)

PROMISE — — asynchronous operation —→ FAILURE (rejected state)
(Pending state)

In a simpler language you have given a promise to someone that is you simply have agreed to that person at that point of time that i will do your work , basically you haven’t done it yet .So your promise is in pending state. And it’s totally up to you whether you do it or not. And if you completed the work your promise gets fulfilled and if somehow you aren’t able to complete that work , your promise gets rejected.

Ways to create a promise :-

a. ) We have to use resolve() or reject() to create promises from values.
b. ) Promise.resolve(value) will fulfill the promise with value.
c. ) Promise.reject(error) will reject the promise with error.

Ways to handle a promise :-

a.) We use .then method for the fulfillment of the promise.

b.) We use .catch method for the rejection of the promise.

Now we have to combine the then catch statements so that even if your operation fails we get some output. Our code should not stop.

Demonstration with examples :-

Example 1.
Here we have declared a popular setTimeOut asynchronous function with a time of 1000 millisecond . And for this particular case we used resolve and passed 1 in that as a value. Now we are using then-catch block to handle this promise. As we are resolving this promise , then block will handle the promise.

As the code shown below , the then statement executes and the Result with the value is printed.
// Result 1

Example 2.

Making an API call and using then block to fetch its response and catch block to catch the error (if there is any) .

Transformation from then catch to async await :-

Async await basically makes it easy to work with Javascript promises.
What is the motivation behind using async await — when there is more than one promise involved , we have to chain .then’s() . It becomes more and more tedious.

As the code displayed above, when we have more than one promise we have to chain .then’s . We can avoid it by using async and await . They just add syntactic sugar to the code. Or we can say they help us to write the code in a more beautiful way.

Code with Async-await

You need to have some kind of function in which your awaiting code is inside. So here the function is asyncAwait and for informing the compiler that there is an async function we have to put async keyword in front of it. Now we want to call post.save() and here we have just had to put await keyword in front of it. As it says the code should wait until the post.save() function is finished and afterwards it will execute the next thing.

The function post.save() is just going to return the resolve section of the promise. And we can say res is equals to awaiting post.save() function. And then we can make other calls similarly.

We can say this , that async-await helps you to write asynchronous code synchronously.

You might be thinking that if the function is just going to return the resolve section and if any error occured how it’s going to handle that ?

Handling errors in async-await using try-catch

To handle errors in async await we just have to wrap the code inside the try catch block. You have to put all the code that could fail inside the try bock like async calls. Now the code inside the try block is going to execute and if any line fails the catch block will catch he error and the error will be printed in the console.

Thanks !