for await...of

Baseline Large disponibilit

Cette fonctionnalit est bien tablie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.

En savoir plus
Voir la compatibilit complte

L'instruction for awaitof permet de crer une boucle qui parcourt les objets itrables asynchrones de la mme faon qu'on parcourt les itrables synchrones (tels que les chanes de caractres (String), les tableaux Array, les objets semblables aux tableaux comme arguments ou NodeList), TypedArray, Map, Set. Cette instruction invoque un mcanisme d'itration spcifique et les instructions excuter pour chaque proprit de l'objet.

Syntaxe

for await (const variable of iterable) {
  instruction;
}

variable: chaque itration, la valeur d'une proprit diffrente est affecte variable. Cette variable peut tre dclare avec const, let ou var.
iterable: Un objet pour lequel on parcourt les proprits itrables.

Exemples

Parcourir des itrables asynchrones

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

Parcourir des gnrateurs asynchrones

Les gnrateurs asynchrones implmentent le protocole d'itrateur asynchrone et on peut donc les parcourir avec 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

Pour prendre un exemple plus concret, on peut parcourir les donnes fournies par une API avec un gnrateur asynchrone grce for await... of. Dans cet exemple, on commence par crer un itrateur asynchrone partir d'un flux de donnes puis on utilise cet itrateur et for await...of afin de calculer la taille de la rponse fournie par l'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();
  }
}
// On rcupre les donnes d'une URL et
// on calcule la taille de la rponse
// avec un gnrateur asynchrone
async function getResponseSize(url) {
  const response = await fetch(url);
  // La taille de la rponse, exprime en octets.
  let responseSize = 0;
  // La boucle for-await-of qui parcourt, de faon asynchrone,
  // chaque portion de la rponse.
  for await (const chunk of streamAsyncIterator(response.body)) {
    responseSize += chunk.length;
  }

  console.log(`Taille de la rponse : ${responseSize} octets`);
  return responseSize;
}
getResponseSize("https://jsonplaceholder.typicode.com/photos");

Spcifications

Spcification
ECMAScript 2027 LanguageSpecification # sec-for-in-and-for-of-statements

Compatibilit des navigateurs

Voir aussi

Statements/for...of

Aider amliorer MDN

Cette page vous a-t-elle t utile ?

Oui Non

Apprendre contribuer

Cette page a t modifie le 22 mai 2026 par les contributeurices du MDN.

Voir cette page sur GitHub Signaler un problme avec ce contenu