JavaScript: Porque usar Promise.all?
Tags: javascript, programming, beginners, braziliandevs
Published: 2023-02-17 11:12:57

Eae gente bonita, beleza? 

Dessa vez eu vim falar sobre um comando bem útil para o nosso dia a dia e principalmente quando precisamos otimizar o nosso código.

O comando em questão é o `Promise.all`. Ele basicamente serve para executar diversas promises de forma paralela. É importante você entender o conceito de promises no JavaScript para ler esse texto. Caso não entenda eu tenho um texto falando sobre isso também, [JavaScript: O que é uma Promise?
](https://dev.to/cristuker/o-que-e-uma-promise-3lfd)

## Exemplo

Vamos considerar o código abaixo. Nesse código eu tenho uma função chamada `funcaoPromise` que recebo um parâmetro que são os milissegundos pro setTimeOut. Todas aqui levam 5 segundos para serem executadas. Se eu chamar 3 funções dessas seguidas elas levam ao todo 15 segundos para serem executadas 

```javascript

async function funcaoPromise(milissegundos) {
    return new Promise((resolve, reject) => {
        return setTimeout(() => resolve(console.log(`Executado após ${milissegundos} milissegundos`)), milissegundos)
    })
}

async function main() {
    console.time()

    await funcaoPromise(5000)
    await funcaoPromise(5000)
    await funcaoPromise(5000)

    console.timeEnd()

};

main();
```

e o retorno no console é

```javascript
Executado após 5000 milissegundos
Executado após 5000 milissegundos
Executado após 5000 milissegundos
default: 15.015s
```

Porém, e se eu quisesse que as 3 fossem executadas "ao mesmo tempo", assim a execução do código seria mais rápido e ao invés de gastar 15s eu gastar 5s, pois todas levam o mesmo tempo para serem executadas. E é nessa hora que entra o nosso herói o `Promise.all`

<img src="https://media.giphy.com/media/eIUpSyzwGp0YhAMTKr/giphy.gif" />

Bom vamos refatorar esse código e usar o `Promise.all`. Após a refatoração o código vai ficar exatamente dessa forma:

```javascript

async function funcaoPromise(milissegundos) {
    return new Promise((resolve, reject) => {
        return setTimeout(() => resolve(console.log(`Executado após ${milissegundos} milissegundos`)), milissegundos)
    })
}

async function main() {
    console.time()


    await Promise.all([
        funcaoPromise(5000),
        funcaoPromise(5000),
        funcaoPromise(5000)
    ]);

    console.timeEnd()

};

main();
```
## Como funciona?

Bom basicamente nós passamos uma array para o `Promise.all` como parâmetro e dentro desse array passamos as promises que devem ser executadas em paralelo e colocamos um `await` na frente para esperar pela execução de todas.

## Mas e se a minha promise tiver um retorno?

Nesse caso nós podemos desestruturar o retorno do `Promise.all` pois ele retorna um array com o resultado da função na mesma posição em que ela foi passada.

````javascript
    const [resultado1, resultado2, resultado3] = await Promise.all([
        funcaoPromise(5000),
        funcaoPromise(5000),
        funcaoPromise(5000)
    ]);
```

E após isso tudo se executarmos o código usando `Promise.all` teremos o seguinte resultado:

```javascript
Executado após 5000 milissegundos
Executado após 5000 milissegundos
Executado após 5000 milissegundos
default: 5.008s
```

O código foi executado em 5 segundos apenas.

Se chegou até aqui, me segue la nas [redes vizinhas.] (https://bento.me/cmsdev)
<img src="https://media.giphy.com/media/uWlpPGquhGZNFzY90z/giphy.gif" />