HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
All web technology
Learn web development
Discover our tools
Get to know MDN better
Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
View in English Always switch to English
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.
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.
for await…of
String
Array
arguments
NodeList
TypedArray
Map
Set
for await (const 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.
const
let
var
iterable
Un objet pour lequel on parcourt les propriétés itérables.
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
Les générateurs asynchrones implémentent le protocole d'itérateur asynchrone et on peut donc les parcourir avec for await...of:
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 :
for await... of
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");
Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.
Instructions/for...of