`for await...of` vs `Promise.all` no JavaScript

O JavaScript é uma linguagem de programação bastante flexível e poderosa, permitindo realizar tarefas assíncronas de forma bem eficiente. Duas funcionalidades bem úteis nesse contexto são o for await...of e o Promise.all. Vamos entender como eles funcionam e como podem ser aplicados.

for await...of

O for await...of é uma estrutura que nos permite iterar de forma assíncrona sobre uma coleção de elementos. Isso é particularmente interessante quando estamos lidando com operações assíncronas, como requisições a APIs ou leitura de arquivos.

A sintaxe básica do for await...of é a seguinte:

for await (const item of collection) {
  // `getFullURL`: função que se conecta a uma API para capturar a URL.
  const url = await getFullURL();
  return url;
}

Podemos utilizar essa estrutura em conjunto com arrays, para processar cada item de forma assíncrona.

Promise.all

O Promise.all é um método que nos permite lidar com várias promises ao mesmo tempo. Ele recebe um array de promises e retorna uma nova promises. Essa promise é resolvida quando todas as promises do array forem resolvidas, ou rejeitada se ao menos uma delas for rejeitada.

A sintaxe básica do Promise.all é a seguinte:

async function downloadFiles(urls) {
  // `downloadFileByURL`: função que retorna uma promessa de download de um arquivo
  const filesPromises = urls.map(url => downloadFileByURL(url));

  try {
    const files = await Promise.all(filesPromises);
    return files;
  } catch (erro) {
    // Error handling.
  }
}