Looking at the title, many might feel this is tough, and to be really honest, it really is. But do not panic if you can't make it on the first go. If you get comfy with this?Congratulations!😍. This is a tough one to explain but I tried my best.

Yes, there are pre-requisites:

CallBack Hell: venkzy.hashnode.dev/async-js-in-a-nutshell-..

AsyncJS: venkzy.hashnode.dev/async-js-basics

Or from any other resource. Doesn't matter.

What is a Promise? Why is it necessary?

This question is very tricky and many people have different answers but keep it simple and straightforward *** because callBack hell is thrash and messy***. It is very difficult to write one.

General Use-case...

Promises are typically used when you have to fetch some data from a third party like an API or a proper database on the server side. In these scenarios we might get the data from the Database or API or we might not. So your *front-end or the client side won't know this and this should be handled gracefully so we use Promise. *

Note: We use XMLHttpRequest for fetching, to make things simpler we now use the fetch API which is quite simple and elegant. But I will assume you know how to do this. XMLHttpRequest is the hard way for sure.

Syntax for Promise

It is quite overwhelming the very first time trust me. But it will get better when you practice and play around. So let's start. I will help you out. Look at the image carefully.

See carefully,

• I declare a function by the name afunctionName and it is returning a promise return new Promise(resolve, reject) This has two arguments *resolve *and reject and this is explained below in depth(these are nothing but stages of promises).

• There are two methods that are called resolve() and reject(). Let us say you are fetching data and you got the data, the resolve() method is run and this runs only when things are fine, that is your API is positively responding with data you want else automatically reject() runs because things are not fine.

• Then we have afunctionName.then() well this literally says if the promise is resolved then do the next set of things we run the inner block, in this case, we displayed the data. If things aren't fine, there is an error above in the afunctionName function, resolve() runs then catch is run.

Simply put,

1. If resolve() runs then the .then() executes

2. If reject() runs then catch() block runs. That is it. Done.

Stages.

Promises are just like our day-to-day usual promise, it has 3 stages:

• Resolve: In this stage, everything goes smoothly and fine. (You fetch data from your resource and you get the data). This returns you the DATA you want as well as a status code of 200 meaning OK. Here is an example that is self-explanatory.

You are creating a promise function, that has absolutely no issues and you got your response from the client side, so resolve() is executed. Generally, we send the data in resolve(data) and just get it in .then(data=>console.log(data)).

• Reject: If there is an error in the API or some issues in the back-end and you do not get a fair response that is not tagged with 200OK. Generally, we send the error message this time .then() does not execute the catch executes because reject() is running. Example:

  

*Note: I have commented resolve() because reject() has to run. I have passed an error message too *

• Pending: This is an intermediate stage between resolve and rejection. Waiting stage in simple terms.

Complete Promises output here. In this example, I have chained the promises. Just have a look.

Well, this is not it there is an easy workaround, the async-await which is quite simple. Stay tuned for the next one. Thanks for reading this.