How did promise evolve in Javascript? 
Tags: javascipt
Published: 2020-07-18 08:39:41

Promise being one of the most important concepts of javascript is massively misunderstood by many developers, hence in this post firstly I will explain promise with a short story, and then we will dive deep in the code to understand it better.




![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ng93yway0u7yzd42uz7u.jpg)

#####INCIDENT A
Gilbert is making a request from Godfrey to make a promise of bringing pizza base from the market. 

#####INCIDENT B
In this step, Gilbert is talking about the `asynchronous operation` in which he is preparing vegetables without waiting for the pizza base.

#####INCIDENT C
Godfrey is talking about how he can `return (value)` the promise which he is making. He is also trying to ask what if he fails in keeping up with the promise.

#####INCIDENT D & E
It shows that the response made by the promise can be a `success` or `failure`.

#####INCIDENT F
This is the final step where we receive the result of the promise.

####DEFINING PROMISES IN JAVASCRIPT.
From this short story, we learn that promise is an object which is completed or failed by doing an asynchronous(not depending on the main operation) operation. Now we can attach callbacks to this promise object (which is a pizza base in our case) to perform functions on them.

####HOW JAVASCRIPT WORKS.
Javascript is a single-threaded language by this I mean that it runs line by line and top to bottom, but what happens when it encounters an asynchronous function. Asynchronous function takes place in the order they complete. Let's see it in the following example.
Can you guess what will be logged out after we run it?
```javascript
console.log("apple");
setTimeout(() => { console.log("banana") }, 2000);
setTimeout(() => { console.log("cherry") }, 1000);
```
console result ` apple cherry banana `
not this  ~~`apple banana cherry`~~.

The reason for this to happen is that even though `line 2` started earlier than `line 3` but the execution of `line2` takes 2 seconds whereas `line3` takes 1 second, so it logged out in that manner.

####CREATING A PROMISE.

Promise constructor takes in one argument of `callback function` which contains two parameters `resolve` and `reject`.

Below is the method of creating a promise.
```javascript
function making_promise(mypromise)
{
    return new Promise((resolve, reject) => {
        if (true) {
            resolve();
        } else {
            reject();
        }
    });
}
```
Now once we have created a promise we will catch it by `.then(function)` when it is successful and by `.catch(function)` when it is failed.

In this manner.
```javascript
making_promise("coding daily")
    .then(() => { console.log("promised completed successfully") })
    .catch(() => { console.log("it made an error") });
```
console result:

```               promised completed successfully              ```

Now if I change that `true` to `false` inside the if statement then we get to reject and we catch it by `.catch(function)`.

```javascript
function making_promise(mypromise)
{
    return new Promise((resolve, reject) => {
        if (false) {
            resolve();
        } else {
            reject();
        }
    });
}
making_promise("coding daily")
    .then(() => { console.log("promised completed successfully") })
    .catch(() => { console.log("it made an error") });
```
console result:

```                       it made an error                     ```

There are three states of response in Promise.
* `resolve`: when the promise is successful.
* `reject`: when there is an error.
* `pending`: when the promise is pending.

####CREATING PROMISE FOR OUR PIZZA EXAMPLE.
So we can make our pizza promise story in code like this.
```javascript
function createpizza(pizza)
{
    return new Promise(( resolve , reject) => {
        console.log(`preparing to make ${pizza}`);
        resolve();
    });
}

function bringbase()
{
    console.log("got pizza base from market");
    console.log("pizza created!")
}

createpizza("Margherita Pizza").then(bringbase);
```
console result:
```
preparing to make Margherita Pizza
got pizza base from market
pizza created!
```

While doing web development we use a lot of asynchronous operations like getting JSON data from APIs, posting something to the website, deleting the data etc..

The best thing about asynchronous operations is that they do not hinder other processes occurring on the page which kind of makes the web faster and the overall experience of a user becomes good that's why it becomes important to learn asynchronous objects like Promises.

Go make your own promise.
Thank you!

I will also soon be publishing it on GeeksforGeeks.