JavaScript: Porque usar Promise.all?

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?

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

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 é

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

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:

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.

    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" />