# JavaScript Promises.

## What problem promises solve.

The problem statement is this.

*   We all know that JavaScript executes code line-by-line, from top to bottom. Now imagine you have five functions in a file, all independent, meaning each one performs a different task.
    
*   Let's say the first function runs quickly, then the second one runs quickly. But when it comes to the third function, it takes a long time. This is because the third function makes an API call, and fetching data takes time. The data can be heavy, so it takes longer. Furthermore, there's no guarantee that the data will arrive. If it doesn't, it may keep trying again and again.
    
*   Because of this, the other two functions (function 4 and function 5) don't run at all. But the user needs those functions to run and return some data. However, the third function is blocking everything.
    
*   To solve this problem, we use asynchronous functions. These functions run independently and don't block the execution of other code. They work in parallel, allowing the rest of the code to continue running.
    
*   But even if the async function runs independently, there's still a question, who guarantees that the function will return data, or what data it will return?
    

The solution is Promises.

> ### Solution :-
> 
> *   Basically, Promises handle asynchronous functions and API calls, as described above. In programming, there are many tasks that need to be asynchronous, such as timer functions for delays, file handling, and file uploading. Whenever you perform these operations, Promises guarantee whether data has been received or not.
>     
> *   This data is returned as states.
>     
> *   For now, you should understand what a Promise is. In the next section, we'll look at how its states work and how it returns data.
>     

## Promises states ( pending, fulfilled, rejected ).

*   So now you understand what a Promise is and why we use it. Now let's look at its states and how it returns data.
    
*   Basically, there are three states in a Promise. These three states decide whether your data is received or not. You can think of it in a simple yes/no form. Let's understand them one by one.
    

> ### Pending :-
> 
> *   By default, the first state is `Pending`. From the word itself, you can understand that the data is not received yet and it is not rejected either. It is just waiting, so it stays in the pending state.
>     

> ### Fulfilled :-
> 
> *   The second state is `fulfilled`. From the word, you can understand that the task was completed successfully. Now the data is available and you can use it. It simply means the data has come successfully.
>     

> ### Rejected :-
> 
> *   The last state is Rejected. From the word `reject`, it means the task failed. The function did not complete successfully, so it is rejected. That's it—just understand that the task failed.
>     

So these are the states of a Promise.

## Basic promises lifecycle.

In the Promise lifecycle, when it is called, this is how it works step by step.

*   At the beginning, the Promise is always in the Pending state. After that, it has only two possible outcomes, either it becomes Rejected or Fulfilled.
    
*   If it gets Rejected, you get two functions: then and catch. If an error directly occurs, it will go to the catch function, which is mainly used for error handling. But if you want, you can also handle or return a custom error inside the then function.
    
*   If it gets Fulfilled, you use the then function. Inside then, you receive the data, and then you can process it or return it as needed.
    
*   So overall, the Promise internally depends on then and catch to handle the result, whether it is success or failure.
    

## Handling success and failure.

Basically, in a Promise, we handle success and failure using two functions. Let's understand them one by one.

> ### Handling Success :-
> 
> *   When you use a Promise in an async function, there are two possible states after execution: fulfilled or rejected (pending is the default at the start).
>     
> *   So when the async function finishes, it will return data in either of these two states. If you want to check whether the function returned successful data, you use the then function.
>     
> *   The `then` function confirms that the Promise has been successfully resolved and the data is available. After that, you can decide what to do with the data. So, we use then to handle success.
>     
> 
> ```javascript
> let apiCall = new Promise((res, rej) => {
>      res("Data");
> });
> 
> apiCall.then((result) => {
>   console.log(result);
> })
> ```

> ### Handling Failure :-
> 
> *   If you want to handle failure and perform some operation when something goes wrong, you use the `catch` function.
>     
> *   Inside catch, you get the error that tells you why the async function was rejected.
>     
> 
> ```javascript
> let apiCall = new Promise((res, rej) => {
>      rej("Fail");
> });
> 
> apiCall.catch((err) => {
>     console.log(err);
> });
> ```

So overall, you use then to handle success and catch to handle failure.

## Promises chaining concepts.

In Promise chaining, this is what happens.

*   You use a Promise in an async function, and the data comes in two possible states :- fulfilled or rejected.
    
*   Now assume you get fulfilled data. You use the then function, and inside then you receive the data. You perform some operation on that data.
    
*   After that, if you want to pass the result again and perform more operations, you can do it by returning the value and passing it to another then function. In this way, you can pass the result from one then to another, then to the next, and so on.
    

So basically, Promise chaining means passing data from one then to another then to perform multiple operations step by step.

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">So with my above explanation i hope you understand what i learn and what's my thought process on JavaScript Promises.</div>
</div>