Promises in javascript are similar to the promises that your mom made when you didn't do your homework.......just kidding, let's get started.

By definition, Promises are objects that represent the eventual completion (or failure) of an asynchronous operation and its resulting value. Didn't get the meaning? read through.

Introduction

Let's take an example to understand what promises are. When we were all children, we were made to complete our homework by rising an imaginary temptation (chocolates, candies, or even ice creams) by our moms which might or might not get fulfilled. The promise that your mom made is what keeps you connected. Any promise consists of a producer code and a consumer code. Producer code is what takes time and is expected to give some results, either immediately or maybe after some time and consumer code is that which is in need of the result.

Here in our example, if the chocolates are already at home, then your mother can give them as soon as you complete your homework, but if they had to be bought from the store, it takes time for your mother to get them. So, your mother becomes the producer code because you expect her to give chocolates, and you become the consumer code because YOU need them.

I hope you understood what producer code and consumer code mean. Now coming to the promises, they always have two states, fulfilled and rejected. Let's go back to the example that we looked at. Let's assume that you completed your homework well within the time and your mother was happy. In this case, your mother wishes to give you the chocolates and that the promise made was fulfilled. But what if you didn't do your homework? The promise will now be broken and you will no longer get the chocolates. This time the result is rejected.

Promises in javascript

In javascript, a promise is an object that links the producer code and the consumer code & has the same functionalities that we discussed above. The syntax for a promise object is,

From the above markup, it can be seen that new Promise takes a function with two arguments, resolve & reject and these are callbacks that javascript provides. This function runs automatically as soon as new Promise is created. new Promise consists of producer code and is responsible for delivering a result. As and when new Promise obtains the result, it should call either of the callbacks mentioned.

There are always two possibilities,

Case 1: Producer code ran successfully and the result is obtained

Case 2: An error occurred

In case 1, since the code run was successful, new Promise calls resolve(), and in case 2, there was an error, due to which new Promise calls reject().

The result of new Promise is always an object and in the current example, it's stored in promise. This resulting promise object has some key : value pairs,

1. state: Initially, the state is always "pending" and depending on the result, the value changes to either "fulfilled" or "rejected".
2. result: Initial value of the result is always "undefined" and again depending on the result, Its value changes to either "value" or "error".

Let's understand this using a few code snippets,

In the first snippet, we can see that the promise is resolved and the result is obtained after 1 second. In this case, the value of the state changes from "pending" to "fulfilled" and that of the result changes from "undefined" to "Promise is resolved".

In the second snippet, the promise is broken and as usual, the value of state changes from "pending" to "rejected" and that of the result changes from "undefined" to "oops..this promise is rejected".

.then(), .catch() & .finally()

Now let's assume a scenario where running a few functions in the code base depend on the state of the promise. A few functions need to be run only if the promise is resolved and a few other functions if only the promise is rejected. This can be achieved using the .then and .catch methods.

.then is a function that runs when a promise is resolved and .catch runs when a promise is rejected. .then takes the promise object & returns another promise which can then be used for storing the data returned or to console log the data. This chaining of .then methods one after the other is called Promise Chaining. In case the promise gets rejected, the resulting promise object passes through all the .then methods and is finally picked by the .catch method which is meant to resolve the errors.

At last, we have the .finally method. No matter what happens to the promise, .finally will always run and notice in the code snippet that it doesn't take any arguments. The only condition of .finally is that the promise must be settled and it has nothing to do with the result of the promise object.

Conclusion

This article helps you to get started with javascript promises and I assume that I have covered the basic topics in an understandable manner.