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" />
Top comments (0)