for await...of

La sentencia for await...of crea un bucle iterando tanto sobre objetos iterables asincr贸nicos como sincr贸nicos, incluyendo: built-in String, Array, objetos Array-like (por ej., argumentsNodeList), TypedArray, Map, Set, y async/sync iterables definidos por el usuario. Invoca un hook de iteraci贸n personalizada con sentencias a ser ejecutadas por el valor de cada propiedad diferente del objeto.

Sintaxis

for await (variable of iterable) {
  sentencia
}
variable
En cada iteraci贸n, el valor de una propiedad diferente es asignado a variable. variable puede ser declarada con const, let, o var.
iterable
Objeto sobre cuyas propiedades se itera.

Iterando sobre iterables asincr贸nicos

Tambi茅n puedes iterar sobre un objeto que expl铆citamente implementa el protocolo async iterable:

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 funciones generadoras asincr贸nicas

Debido a que las funciones generadoras asincr贸nicas implementan el protocolo async iterator, las mismas pueden ser iteradas utilizando 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 un ejemplo m谩s concreto de iteraci贸n sobre una funci贸n generadora utilizando for await... of, considera iterar sobre datos provistos por una API. Este ejemplo primero crea un iterador asincr贸nico para un stream de datos, luego lo utiliza para obtener el tama帽o de la respuesta desde la 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();
  }
}
// Obtiene datos desde url y calcula el tama帽o de la respuesta utilizando la funci贸n generadora asincr贸nica.
async function getResponseSize(url) {
  const response = await fetch(url);
  // Almacenar谩 el tama帽o de la respuesta en bytes.
  let responseSize = 0;
  // El buble for-await-of. Itera asincr贸nicamente sobre cada parte de la respuesta.
  for await (const chunk of streamAsyncIterator(response.body)) {
    // Incrementando el tama帽o total.
    responseSize += chunk.length;
  }

  console.log(`Tama帽o de la respuesta: ${responseSize} bytes`);
  // salida esperada: "Tama帽o de la respuesta: 1071472"
  return responseSize;
}
getResponseSize('https://jsonplaceholder.typicode.com/photos');

Especificaciones

Especificaci贸n Estado Comentarios
ECMAScript (ECMA-262)
La definici贸n de 'ECMAScript Language: The for-in, for-of, and for-await-of Statements' en esta especificaci贸n.
Living Standard

Compatibilidad de Navegadores

BCD tables only load in the browser

Ver tambi茅n