for await...of

Baseline Widely available

This feature is well established and works across many devices and browser versions. Its been available across browsers since janeiro de 2020.

Learn more
See full compatibility

A declarao for await...of cria um loop que itera sobre objetos iterveis assncronos, bem como sobre iterveis sncronos, incluindo: String, Array, Array-como objetos (e.g., arguments or NodeList), TypedArray, Map, Set, e iterveis async/sync. Invoca um hook de iterao personalizado com instrues a serem executadas para o valor de cada propriedade do objeto.

Sintaxe

for await (varivel of itervel) {
  // declarao
}

varivel: Em cada iterao, o valor de uma propriedade diferente atribudo varivel. A varivel pode ser declarada como const, let ou var.
itervel: Objeto cujas propriedades iterveis devem ser iteradas.

Iterando sobre iterveis assncronos

Voc tambm pode iterar sobre um objeto que explicidamente implementa protocolo itervel assncrono(async iterable protocol):

var asyncIterable = {
  [Symbol.asyncIterator]() {
    return {
      i: 0,
      next() {
        if (this.i < 3) {
          return Promise.resolve({ value: this.i++, done: false });
        }

        return Promise.resolve({ done: true });
      },
    };
  },
};

(async function () {
  for await (let num of asyncIterable) {
    console.log(num);
  }
})();

// 0
// 1
// 2

Iterando sobre generators assncronos

Como os geradores assncronos implementam o protocolo assncrono Iterator, eles podem fazer um loop usando for await... of

async function* asyncGenerator() {
  var i = 0;
  while (i < 3) {
    yield i++;
  }
}

(async function () {
  for await (let num of asyncGenerator()) {
    console.log(num);
  }
})();
// 0
// 1
// 2

Para termos um exemplo mais concreto de iterao sobre um generator assncrono usando for await... of, considere iterar sobre dados obtidos atravs de um fecth de uma API. Este exemplo cria primeiro um iterador assncrono para um stream de dados e depois usa-o para encontrar o tamanho da resposta da API.

async function* streamAsyncIterator(stream) {
  const reader = stream.getReader();
  try {
    while (true) {
      const { done, value } = await reader.read();
      if (done) {
        return;
      }
      yield value;
    }
  } finally {
    reader.releaseLock();
  }
}
// Obtm dados do URL e calcula o tamanho da resposta usando o generator assncrono
async function getResponseSize(url) {
  const response = await fetch(url);
  // Guardar o tamanho do response em bytes.
  let responseSize = 0;
  // O for-wait-loop ir iterar de forma assncrona sobre cada parte do response.
  for await (const chunk of streamAsyncIterator(response.body)) {
    // Incrementa o valor do responseSize
    responseSize += chunk.length;
  }

  console.log(`Response Size: ${responseSize} bytes`);
  // output esperado:"Response Size: 1071472"
  return responseSize;
}
getResponseSize("https://jsonplaceholder.typicode.com/photos");