Promises in JavaScript
Tags: javascript, promises, asynchronous, callbackhell
Published: 2022-06-17 12:24:48

## Introduction 
Before **ECMA Script 6** we were using **Callback Functions** to handle Asynchronous Operations. 

### What is Callback Function?
**Callback Function** is a function passed to another function to be invoked when the asynchronous operation completes.

`setTimeout()` and `setEnterval()` is an Example of **Callback Functions**.

To simplify Callback Function Definition, Let's take an example with the `setTimeout()` Function.

```javascript
//* Callback Function
function sayHello() {
  console.log("Hello, World!");
}

setTimeout(sayHello, 1000);
```

Above Code, We used `setTimeout()` Function that get another Function `sayHello()` as a Parameter and then Executes it after a given Time `1 Second`, in This Example `sayHello()` Function is the **Callback Function** Which was Executed after 1 Second.

So, the Above Example will Log "Hello, World!" in the Console after 1 Second.

Now after Understanding **Callback Function** Concept let's take a More Complicated Example on `setTimeout()` Function.

```javascript
setTimeout(() => {
  console.log("I"); //* after (1) second
  setTimeout(() => {
    console.log("Love"); //* after (3) second
    setTimeout(() => {
      console.log("JavaScript"); //* after (6) second
      setTimeout(() => {
        console.log("Very"); //* after (10) second
        setTimeout(() => {
          console.log("Much"); //* after (15) second
          setTimeout(() => {
            console.log("!"); //* after (21) second
          }, 6000);
        }, 5000);
      }, 4000);
    }, 3000);
  }, 2000);
}, 1000);
```

In the above example we used the `setTimeout` Function a lot of Times to log "I Love JavaScript Very Much !" Sentence but every word after a special time.
But Did You Notice Things in This Example?
Yes Exactly The Code shape is Not Practical, It has 6 `Callback Functions`, And in Large Scale Projects You will have More and More of these Nested ``Callback Functions``.
This Problem is Known as **Callback Hell** or **Pyramid of Doom**.

To Solve this Problem **ES6** gets a new Object Called **Promises**.
To Understand the Promise Concept, Let Me and You, I give you a Promise that I Will Give You Your Book in the Next Week, This is Called a Promise.
Now, What is the possible instances of the promise I made to you?
Good, There is Two-State:
  - I will give You Your Book and this is called **Resolved State**
  - I will not Give You Your Book and this called **Rejected State**
  - In Between Those two States, There is another State Called **Pending State**

Now Let's Take an Example of a Promise

```javascript
const myPromise = new Promise((resolve, reject) => {
  const connect = true;

  if (connect) {
    resolve("Your Connection Success :)");
  } else {
    reject(new Error("Sorry, Connection Failed :("));
  }
});

myPromise
.then((res) => {
  console.log(res);
})
.catch((error) => {
  console.log(error);
})
.finally(() => {
  console.log("Process is Done :)");
});
```

In the above example, we use a **Promise** Object to handle a Connection Process.
We Notice that promise have three ways to Get data from It:
  - `then()` Function to get Response in **Resolved Case**.
  - `catch()` Function to get Error in **Rejected Case**.
  - `finally()` Function Which Excuted in all Cases.

The Fantastic Thing in Promise is That you Can any Numbers of `then()` Functions, Let's take an example:

```javascript
//* Previous Code.....
myPromise
  .then((res) => {
    return res;
  })
  .then((res) => `${res} 1`)
  .then((res) => `${res} 2`)
  .then((res) => `${res} 3`)
  .then((res) => `${res} 4`)
  .then((res) => `${res} 5`)
  .then((res) => console.log(res))
  .catch((error) => {
    console.log(error);
  })
  .finally(() => {
    console.log("Process is Done :)");
});
```

In The Above Example the Result will be Like This in Console:
```
Your Connection Success :) 1 2 3 4 5
Process is Done :)
```

### `async` and `await` Syntax
In **ECMA Script 2017** We have a new Syntactical Suger to ease **Promises** Handling by using `async` and `await` Keywords.
So if we will write the Previous Example, It will be Like This:

```javascript
const connectFunc = async () => {
  try {
    const res = await myPromise;
    console.log(res);
  } catch (error) {
    console.log(error);
  } finally {
    console.log("Process is Done :)");
  }
};
```

As We See, To use the `async` Keyword and `await` Method, we add `async` before Function that will contain **Promises** Handling Code, and We use the `await` Keyword before any Async Line, and Finally We put all of these in `try-catch` block.

## Conclusion
Finally, every day that passes by, there are new things that are added and other things that are Deprecated.
So, do not forget to follow all news in the field to develop yourself and your skills.