Promises in 15 minutes
Tags: javascript, node, promises
Published: 2020-05-05 21:20:58

Good evening, fellows!

Let's simplify the use of Promises?

Particularly, when I started with the concept of Promises when I learned how to code, I saw a lot of online materials and tutorials that explained Promises in a very confusing way, then I decided to write a simple text explaining it in a very practical way. Of course, if you need to understand 'Promises Under the Hood' this article is not for you. If you need to understand Promises in a short period of time to make a solution, this is for you.

Basically, Promises were made to create better asynchronous callback functions in Javascript, to make the code better organized. To grasp the concept think like it literally means that we are making a promise in real life. For example:

- I promise that I will make you understand Promises in 15 minutes.

For that promise, I can do two things:
- I can either succeed by making you understand Promises in 15 minutes.
- Or I can fail and you'll not understand Promises in 15 minutes.

In code, it's the very same thing. Ok, so let's see this.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6uwp5fs41m8r13bquse1.png)

The output for this script is: `This is in then: success`

Here, we have a block inside of a Promise function that sums 1 + 1. If the result is 2, it means that our promise succeded, otherwise, means that our promise was rejected, because `1 + 1 = 2`. If we change the number of the sum, we'll be rejected because we're saying that the variable of the sum is 2. If it isn't, promise rejected.

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

The output for this script is: `This is in catch: failed.`

Now let's analyze this code

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

This code sees if you're using Angular or Vue, if one of those is true, it calls a callback function which sends an alert with a title and a message.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8q7s389fvwhwdnxknkxz.png)

Now let's change this to a Promise and make this code better.

First, we create a function that instantiates a Promise, passing our parameters **resolve** and **reject**. Then, we write the code that we want to be in that Promise, in my case, I want to ensure that developers are using the React lib. So I make the validation and dispatch the action that I want to execute when the promise resolves and when the promise rejects. Like this:

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

After that, I write the **then** function calling my Promise and I can do whatever I want in that block. When that Promise is completed, I want to log a message in my console both when I have a resolution or rejection. In the **THEN** block is the code that runs when my promise is Resolved, and in the **CATCH** block, the one which runs when my promise is rejected.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/232ejxq4vv3glryg8ewr.png)

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

Nice, huh?

Also, we can make simultaneous Promises using **Promise.ALL** when we need to make two or more Promises at the same time.

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

The output is going to be

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9a6v62chynfbio1ltfg9.png)

Or use **Promise.RACE** if we need to get the result of the first Promise that executes and ignore the upcoming promises.

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

The output is going to be

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

And I guess that's it!

Some references:

- https://treinamento.nodebr.org/
- https://braziljs.org/artigos/promises-no-javascript/
- https://dev.to/khaosdoctor/entendendo-promises-de-uma-vez-por-todas-44i7
- https://dev.to/khaosdoctor/construindo-uma-promise-do-zero-4ndp
- https://imasters.com.br/javascript/futuro-das-promises-no-javascript
- https://www.youtube.com/watch?v=wZwMVbgQZps&list=PLnOICPAPShyRZd7nnbC7h8kCQwM-6K3KW&index=10&t=0s


Thank you!