JavaScript Promises — Explained -1

Let me give you some real-time example before we dive into the technicality of what is a Promise and why do we use it. Let’s say when someone gets a good score in their academics, their fathers used to promise their sons/daughters that you will get a gift once you achieve a good score.

Now it’s results time and like you expected you got a decent score enough to get your surprise from your father. But, unfortunately, the gift was not available in the market, so your surprise gift was in a pending state. If not, he would have fulfilled your request. Isn’t it?

I know, it’s boring. But, hold on….

Now, the gift was in the market and but your father doesn’t have enough money to buy it for you. Then, it got rejected. Now, you have seen 3 phases of your dad’s promise.

So, every promise has to end up somewhere let it be pending or fulfilled, or rejected. Let’s get this thing into technical words with the above example

As you can see, this is something related series of steps or maybe you can map this to instructions in our programming. In order to achieve your gift, you have to go through a lot of steps like below.

But all these are dependant events and everything has to be executed line by line. This means each statement has to wait for the previous one to finish executing. We can simply call this as “Synchronous”.

Let’s talk about Synchronous and Asynchronous for sometime

So to recap, synchronous code is executed in sequence — each statement waits for the previous statement to finish before executing. Asynchronous code doesn’t have to wait — your program can continue to run. You do this to keep your site or app responsive, reducing waiting time for the user.

How can you make it? Do you think we can achieve this using promises?

To answer your question, YES we can. But, we do have something else as well before promises came into the picture. Prior to the promise, we had callbacks.

A callback is a function that is to be executed after another function has finished executing — hence the name call back.

I know I am taking you guys a little deep, but these are one of the coolest stuff in JS and helps you in your interview as well. By taking a look at the below image you can certainly see a few keywords like resolve and reject and Promise.

What is the syntax for a Promise:
In the bottom example, I used the different syntax which follows ES6. However, both are the same and results in the same execution.

Oops….I forgot almost about Promise. So, what is a promise?

A promise is an object that may produce a single value some time in the future: either a resolved value or a reason that it’s not resolved (e.g., a network error occurred and you can consider it as rejected ).

How Promises Work

A promise is an object which can be returned synchronously from an asynchronous function. It will be in one of 3 possible states like I mentioned in the given example.

• Fulfilled: onFulfilled() will be called (e.g., resolve() was called)
• Rejected: onRejected() will be called (e.g., reject() was called)
• Pending: not yet fulfilled or rejected

Here is an example of what we have discussed in the example using promises

You may ask, where did you use pending in the above example. Pending is a state, where we use some loaders/progress indicators for users to show that your request.

I know I forgot something to tell you about callbacks and how it is related to promises. Will cover this in the next article.

PS:
please ignore my grammatical mistakes