Em muitas aplicações do mundo real, pode ser necessário executar várias tarefas assíncronas simultaneamente ou decidir qual delas termina primeiro. O JavaScript oferece dois métodos principais para lidar com esses cenários: Promise.all() e Promise.race().

Promise.all(): Execução de Tarefas em Paralelo

Promise.all() permite executar várias promessas em paralelo. Retorna uma única promessa que é resolvida quando todas as promessas no array são resolvidas, ou é rejeitada assim que uma das promessas for rejeitada. Isso é útil quando todas as operações assíncronas precisam ser concluídas com sucesso antes de prosseguir.

A função fetchMultipleResources envia três requisições simultaneamente para buscar dados de post, usuário e comentários. Com Promise.all(), todas as três requisições são iniciadas juntas, e a função aguarda até que todas as promessas sejam resolvidas. Após a resolução, os resultados são desestruturados em variáveis separadas (post, user e comments). O título do post, o nome do usuário e o número total de comentários são então exibidos no HTML. Essa abordagem é eficiente quando é necessário que todas as requisições sejam concluídas antes de prosseguir, pois reduz o tempo de espera total ao executar tarefas de forma concorrente.

Promise.race(): Lidando com a Primeira Promessa Resolvida

Promise.race() retorna uma única promessa que é resolvida ou rejeitada assim que a primeira promessa no array for concluída (seja resolvida ou rejeitada). Isso é útil quando o interesse está no resultado mais rápido, como em casos de cancelar uma requisição se ela demorar demais.

A função fetchWithTimeout cria uma timeoutPromise que é rejeitada após 3 segundos, simulando um tempo limite. Simultaneamente, uma fetchPromise solicita dados de uma API. Com Promise.race(), a função aguarda a promessa que for resolvida primeiro. Se o fetch for concluído dentro de 3 segundos, o título da postagem é exibido. Caso contrário, se o fetch demorar demais, o tempo limite é acionado e uma mensagem de erro ("Request timed out!") é exibida no HTML. Essa abordagem é ideal para lidar com situações em que uma resposta rápida é essencial.

Casos de Uso para Execução de Requisições em Paralelo vs. Sequencialmente

Quando Usar Requisições Paralelas (Promise.all())

Requisições paralelas são ideais ao buscar dados de múltiplas fontes independentes, pois permitem que todas as requisições sejam executadas simultaneamente. Por exemplo, ao carregar dados de usuário, postagens e comentários para um painel, cada requisição é separada e não depende das outras, podendo ser buscadas em paralelo para melhorar o desempenho. Essa abordagem minimiza o tempo total de espera, já que as requisições são processadas de forma concorrente em vez de uma após a outra.

Quando Usar Requisições Sequenciais

Em alguns casos, tarefas precisam ser concluídas em uma ordem específica, ou seja, uma deve terminar antes que a próxima comece. Para essas requisições dependentes, pode-se usar async/await em um loop ou encadear chamadas .then(), evitando o uso de Promise.all().

Um exemplo seria buscar primeiro os dados do usuário e, em seguida, usando o ID do usuário obtido, buscar as postagens desse usuário. Nesses cenários, cada requisição depende do resultado da anterior, exigindo uma abordagem sequencial.

Este exemplo demonstra como realizar requisições sequenciais, onde cada requisição depende do resultado da anterior. Em fetchUserDataSequentially, a função primeiro busca os dados do usuário na API. Após receber e analisar os dados do usuário, o ID do usuário é utilizado em uma segunda requisição para buscar as postagens desse usuário. Os resultados são então exibidos no HTML, mostrando o nome do usuário e a quantidade de postagens. Essa abordagem sequencial é necessária quando as requisições são interdependentes, garantindo que cada requisição seja concluída antes de iniciar a próxima.