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

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