L'instruction for await...of permet de créer une boucle qui parcourt les objets itérables asynchrones de la même façon qu'on parcourt les itérables synchrones (tels que les chaînes de caractères (String), les tableaux Array, les objets semblables aux tableaux comme arguments ou NodeList), TypedArray, Map, Set. Cette instruction invoque un mécanisme d'itération spécifique et les instructions à exécuter pour chaque propriété de l'objet.

Syntaxe

for await (variable of iterable) {
  instruction
}
variable
À chaque itération, la valeur d'une propriété différente est affectée à variable. Cette variable peut être déclarée avec const, let ou var.
iterable
Un objet pour lequel on parcourt les propriétés itérables.

Exemples

Parcourir des itérables 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 générateurs asynchrones

Les générateurs asynchrones implémentent le protocole d'itérateur 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 données fournies par une API avec un générateur asynchrone grâce à for await... of. Dans cet exemple, on commence par créer un itérateur asynchrone à partir d'un flux de données puis on utilise cet itérateur et for await...of afin de calculer la taille de la réponse 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 récupère les données d'une URL et 
// on calcule la taille de la réponse
// avec un générateur asynchrone
async function getResponseSize(url) {
  const response = await fetch(url);
  // La taille de la réponse, exprimée en octets.
  let responseSize = 0;
  // La boucle for-await-of qui parcourt, de façon asynchrone,
  // chaque portion de la réponse.
  for await (const chunk of streamAsyncIterator(response.body)) {
    responseSize += chunk.length;
  }
  
  console.log(`Taille de la réponse : ${responseSize} octets`);
  return responseSize;
}
getResponseSize('https://jsonplaceholder.typicode.com/photos');

Spécifications

Spécification État Commentaires
ECMAScript Latest Draft (ECMA-262)
La définition de 'ECMAScript Language: The for-in, for-of, and for-await-of Statements' dans cette spécification.
Projet

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobileServeur
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung InternetNode.js
for await...of
Expérimentale
Chrome Support complet 63Edge Aucun support NonFirefox Support complet 57IE Aucun support NonOpera Support complet 50Safari Support complet 11WebView Android Support complet 63Chrome Android Support complet 63Firefox Android Support complet 57Opera Android Support complet 46Safari iOS ? Samsung Internet Android Support complet Ouinodejs Support complet 10.0.0
Support complet 10.0.0
Aucun support 8.10.0 — 10.0.0
Désactivée
Désactivée From version 8.10.0 until version 10.0.0 (exclusive): this feature is behind the --harmony-async-iteration runtime flag.

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, mdnwebdocs-bot
Dernière mise à jour par : SphinxKnight,