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 enero de 2020.

Learn more
See full compatibility

La sentencia for await...of crea un bucle iterando tanto sobre objetos iterables asincrnicos como sincrnicos, incluyendo: built-in String, Array, objetos Array-like (por ej., arguments o NodeList), TypedArray, Map, Set, y async/sync iterables definidos por el usuario. Invoca un hook de iteracin 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 iteracin, 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 asincrnicos

Tambin puedes iterar sobre un objeto que explcitamente 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 asincrnicas

Debido a que las funciones generadoras asincrnicas 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 ms concreto de iteracin sobre una funcin generadora utilizando for await... of, considera iterar sobre datos provistos por una API. Este ejemplo primero crea un iterador asincrnico para un stream de datos, luego lo utiliza para obtener el tamao 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 tamao de la respuesta utilizando la funcin generadora asincrnica.
async function getResponseSize(url) {
  const response = await fetch(url);
  // Almacenar el tamao de la respuesta en bytes.
  let responseSize = 0;
  // El buble for-await-of. Itera asincrnicamente sobre cada parte de la respuesta.
  for await (const chunk of streamAsyncIterator(response.body)) {
    // Incrementando el tamao total.
    responseSize += chunk.length;
  }

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