Fonctions génératrices asynchrones : Maîtriser les protocoles d'itération asynchrone

La programmation asynchrone est une pierre angulaire du développement JavaScript moderne, en particulier lorsqu'il s'agit d'opérations d'E/S comme la récupération de données depuis des API, la lecture de fichiers ou l'interaction avec des bases de données. Traditionnellement, nous nous sommes appuyés sur les Promesses et async/await pour gérer ces tâches asynchrones. Cependant, les fonctions génératrices asynchrones offrent un moyen puissant et élégant de gérer l'itération asynchrone, nous permettant de traiter des flux de données de manière asynchrone et efficace.

Comprendre les protocoles d'itération asynchrone

Avant de plonger dans les fonctions génératrices asynchrones, il est essentiel de comprendre les protocoles d'itération asynchrone sur lesquels elles sont construites. Ces protocoles définissent comment les sources de données asynchrones peuvent être parcourues de manière contrôlée et prévisible.

Le protocole itérable asynchrone

Le protocole itérable asynchrone définit un objet qui peut être parcouru de manière asynchrone. Un objet est conforme à ce protocole s'il possède une méthode nommée Symbol.asyncIterator qui renvoie un itérateur asynchrone.

Imaginez un itérable comme une liste de lecture de chansons. L'itérable asynchrone est comme une liste de lecture où chaque chanson doit être chargée (asynchronement) avant de pouvoir être jouée.

Exemple :

            const asyncIterable = {
  [Symbol.asyncIterator]() {
    return {
      next() {
        // Récupérer la prochaine valeur de manière asynchrone
      }
    };
  }
};

            

              
                Copy
              
            
          

Le protocole d'itérateur asynchrone

Le protocole d'itérateur asynchrone définit les méthodes qu'un itérateur asynchrone doit implémenter. Un objet conforme à ce protocole doit avoir une méthode next(), et optionnellement des méthodes return() et throw().

• next() : Cette méthode renvoie une Promesse qui se résout en un objet avec deux propriétés : value et done. value contient la prochaine valeur de la séquence, et done est un booléen indiquant si l'itération est terminée.
• return() : (Facultatif) Cette méthode renvoie une Promesse qui se résout en un objet avec les propriétés value et done. Elle signale que l'itérateur est en cours de fermeture. Ceci est utile pour libérer des ressources.
• throw() : (Facultatif) Cette méthode renvoie une Promesse qui se rejette avec une erreur. Elle est utilisée pour signaler qu'une erreur est survenue pendant l'itération.

Exemple :

            const asyncIterator = {
  next() {
    return new Promise((resolve) => {
      // Récupérer la prochaine valeur de manière asynchrone
      setTimeout(() => {
        resolve({ value: /* une certaine valeur */, done: false });
      }, 100);
    });
  },
  return() {
    return Promise.resolve({ value: undefined, done: true });
  },
  throw(error) {
    return Promise.reject(error);
  }
};

            

              
                Copy
              
            
          

Présentation des fonctions génératrices asynchrones

Les fonctions génératrices asynchrones offrent un moyen plus pratique et lisible de créer des itérateurs et des itérables asynchrones. Elles combinent la puissance des générateurs avec l'asynchronicité des Promesses.

Syntaxe

Une fonction génératrice asynchrone est déclarée en utilisant la syntaxe async function* :

            async function* myAsyncGenerator() {
  // Opérations asynchrones et instructions yield ici
}

            

              
                Copy
              
            
          

Le mot-clé yield

À l'intérieur d'une fonction génératrice asynchrone, le mot-clé yield est utilisé pour produire des valeurs de manière asynchrone. Chaque instruction yield met en pause l'exécution de la fonction génératrice jusqu'à ce que la Promesse générée se résolve.

Exemple :

            async function* fetchUsers() {
  const user1 = await fetch('https://example.com/api/users/1').then(res => res.json());
  yield user1;

  const user2 = await fetch('https://example.com/api/users/2').then(res => res.json());
  yield user2;

  const user3 = await fetch('https://example.com/api/users/3').then(res => res.json());
  yield user3;
}

            

              
                Copy
              
            
          

Consommer les générateurs asynchrones avec for await...of

Vous pouvez itérer sur les valeurs produites par une fonction génératrice asynchrone en utilisant la boucle for await...of. Cette boucle gère automatiquement la résolution asynchrone des Promesses générées par le générateur.

Exemple :

            async function main() {
  for await (const user of fetchUsers()) {
    console.log(user);
  }
}

main();

            

              
                Copy
              
            
          

Cas d'utilisation pratiques des fonctions génératrices asynchrones

Les fonctions génératrices asynchrones excellent dans les scénarios impliquant des flux de données asynchrones, tels que :

1. Diffusion de données depuis des API

Imaginez que vous récupérez un grand ensemble de données depuis une API qui prend en charge la pagination. Au lieu de récupérer l'intégralité de l'ensemble de données en une seule fois, vous pouvez utiliser une fonction génératrice asynchrone pour récupérer et générer des pages de données de manière incrémentielle.

Exemple (Récupération de données paginées) :

            async function* fetchPaginatedData(url, pageSize = 10) {
  let page = 1;

  while (true) {
    const response = await fetch(`${url}?page=${page}&pageSize=${pageSize}`);
    const data = await response.json();

    if (data.length === 0) {
      return; // Plus de données
    }

    for (const item of data) {
      yield item;
    }

    page++;
  }
}

async function main() {
  for await (const item of fetchPaginatedData('https://api.example.com/data')) {
    console.log(item);
  }
}

main();

            

              
                Copy
              
            
          

Exemple international (API de taux de change) :

            async function* fetchExchangeRates(currencyPair, startDate, endDate) {
  let currentDate = new Date(startDate);

  while (currentDate <= new Date(endDate)) {
    const dateString = currentDate.toISOString().split('T')[0]; // YYYY-MM-DD
    const url = `https://api.exchangerate.host/${dateString}?base=${currencyPair.substring(0,3)}&symbols=${currencyPair.substring(3,6)}`;
    try {
      const response = await fetch(url);
      const data = await response.json();

      if (data.success) {
        yield {
          date: dateString,
          rate: data.rates[currencyPair.substring(3,6)],
        };
      }

    } catch (error) {
      console.error(`Erreur lors de la récupération des données pour ${dateString}:`, error);
      // Vous pourriez vouloir gérer les erreurs différemment, par ex., réessayer ou sauter la date.
    }

    currentDate.setDate(currentDate.getDate() + 1);
  }
}

async function main() {
  const currencyPair = 'EURUSD';
  const startDate = '2023-01-01';
  const endDate = '2023-01-10';

  for await (const rate of fetchExchangeRates(currencyPair, startDate, endDate)) {
    console.log(rate);
  }
}

main();

            

              
                Copy
              
            
          

Cet exemple récupère les taux de change quotidiens EUR vers USD pour une période donnée. Il gère les erreurs potentielles lors des appels d'API. N'oubliez pas de remplacer `https://api.exchangerate.host` par un point de terminaison d'API fiable et approprié.

2. Traitement de fichiers volumineux

Lorsque vous travaillez avec des fichiers volumineux, la lecture de l'intégralité du fichier en mémoire peut être inefficace. Les fonctions génératrices asynchrones vous permettent de lire le fichier ligne par ligne ou par blocs, en traitant chaque bloc de manière asynchrone.

Exemple (Lecture d'un fichier volumineux ligne par ligne - Node.js) :

            const fs = require('fs');
const readline = require('readline');

async function* readLines(filePath) {
  const fileStream = fs.createReadStream(filePath);

  const rl = readline.createInterface({
    input: fileStream,
    crlfDelay: Infinity
  });

  for await (const line of rl) {
    yield line;
  }
}

async function main() {
  for await (const line of readLines('large_file.txt')) {
    // Traiter chaque ligne de manière asynchrone
    console.log(line);
  }
}

main();

            

              
                Copy
              
            
          

Cet exemple Node.js montre comment lire un fichier ligne par ligne en utilisant fs.createReadStream et readline.createInterface. La fonction génératrice asynchrone readLines génère chaque ligne de manière asynchrone.

3. Gestion des flux de données en temps réel (WebSockets, Server-Sent Events)

Les fonctions génératrices asynchrones sont bien adaptées au traitement des flux de données en temps réel provenant de sources telles que les WebSockets ou les Server-Sent Events (SSE). Vous pouvez générer des données en continu à mesure qu'elles arrivent du flux.

Exemple (Traitement de données depuis un WebSocket - Conceptuel) :

            // Ceci est un exemple conceptuel et nécessite une bibliothèque WebSocket comme 'ws' (Node.js) ou l'API WebSocket intégrée du navigateur.

async function* processWebSocketStream(url) {
  const websocket = new WebSocket(url);

  websocket.onmessage = (event) => {
    //Ceci doit être géré en dehors du générateur.
    //Typiquement, vous pousseriez event.data dans une file d'attente
    //et le générateur tirerait de manière asynchrone de la file d'attente
    //via une Promesse qui se résout lorsque les données sont disponibles.
  };
  websocket.onerror = (error) => {
     //Gérer les erreurs.
  };
  websocket.onclose = () => {
    //Gérer la fermeture.
  }

  //La génération réelle et la gestion de la file d'attente se feraient ici,
  //en utilisant des Promesses pour synchroniser entre l'événement websocket.onmessage
  //et la fonction génératrice asynchrone.
  //Ceci est une illustration simplifiée.

  //while(true){ //Utilisez ceci si les événements sont correctement mis en file d'attente.
  //  const data = await new Promise((resolve) => {
  //   // Résoudre la promesse lorsque les données sont disponibles dans la file d'attente.
  //  })
  //  yield data
  //}

}

async function main() {
  // for await (const message of processWebSocketStream('wss://example.com/ws')) {
  //   console.log(message);
  // }
  console.log("Exemple WebSocket - conceptuel seulement. Voir les commentaires dans le code pour plus de détails.");
}

main();

            

              
                Copy
              
            
          

Notes importantes concernant l'exemple WebSocket :

• L'exemple WebSocket fourni est principalement conceptuel car l'intégration directe de la nature événementielle de WebSocket avec les générateurs asynchrones nécessite une synchronisation minutieuse utilisant des Promesses et des files d'attente.
• Les implémentations réelles impliquent généralement la mise en tampon des messages WebSocket entrants dans une file d'attente et l'utilisation d'une Promesse pour signaler au générateur asynchrone que de nouvelles données sont disponibles. Cela garantit que le générateur ne se bloque pas en attendant les données.

4. Implémentation d'itérateurs asynchrones personnalisés

Les fonctions génératrices asynchrones facilitent la création d'itérateurs asynchrones personnalisés pour toute source de données asynchrone. Vous pouvez définir votre propre logique pour la récupération, le traitement et la génération de valeurs.

Exemple (Génération d'une séquence de nombres de manière asynchrone) :

            async function* generateNumbers(start, end, delay) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, delay));
    yield i;
  }
}

async function main() {
  for await (const number of generateNumbers(1, 5, 500)) {
    console.log(number);
  }
}

main();

            

              
                Copy
              
            
          

Cet exemple génère une séquence de nombres de start à end, avec un delay spécifié entre chaque nombre. La ligne await new Promise(resolve => setTimeout(resolve, delay)) introduit un délai asynchrone.

Gestion des erreurs

La gestion des erreurs est cruciale lors de l'utilisation des fonctions génératrices asynchrones. Vous pouvez utiliser des blocs try...catch à l'intérieur de la fonction génératrice pour gérer les erreurs qui surviennent pendant les opérations asynchrones.

Exemple (Gestion des erreurs dans un générateur asynchrone) :

            async function* fetchData(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();
    yield data;
  } catch (error) {
    console.error('Erreur lors de la récupération des données :', error);
    // Vous pouvez choisir de relancer l'erreur, de générer une valeur par défaut ou d'arrêter l'itération.
    // Par exemple, yield { error: error.message };
    throw error;
  }
}

async function main() {
  try {
    for await (const data of fetchData('https://example.com/api/invalid')) {
      console.log(data);
    }
  } catch (error) {
    console.error('Erreur pendant l\'itération :', error);
  }
}

main();

            

              
                Copy
              
            
          

Cet exemple montre comment gérer les erreurs qui pourraient survenir pendant l'opération fetch. Le bloc try...catch capture toutes les erreurs et les enregistre dans la console. Vous pouvez également relancer l'erreur pour qu'elle soit interceptée par le consommateur du générateur, ou générer un objet d'erreur.

Avantages de l'utilisation des fonctions génératrices asynchrones

• Amélioration de la lisibilité du code : Les fonctions génératrices asynchrones rendent le code d'itération asynchrone plus lisible et maintenable par rapport aux approches traditionnelles basées sur les Promesses.
• Simplification du flux de contrôle asynchrone : Elles offrent un moyen plus naturel et séquentiel d'exprimer la logique asynchrone, ce qui facilite sa compréhension.
• Gestion efficace des ressources : Elles vous permettent de traiter les données par blocs ou par flux, réduisant la consommation de mémoire et améliorant les performances, en particulier lors du traitement de grands ensembles de données ou de flux de données en temps réel.
• Séparation claire des préoccupations : Elles séparent la logique de génération des données de la logique de consommation des données, favorisant la modularité et la réutilisabilité.

Comparaison avec d'autres approches asynchrones

Générateurs asynchrones vs. Promesses

Bien que les Promesses soient fondamentales pour les opérations asynchrones, elles sont moins adaptées à la gestion de séquences de valeurs asynchrones. Les générateurs asynchrones offrent un moyen plus structuré et efficace d'itérer sur des flux de données asynchrones.

Générateurs asynchrones vs. Observables RxJS

Les Observables RxJS sont un autre outil puissant pour gérer les flux de données asynchrones. Les Observables offrent des fonctionnalités plus avancées comme des opérateurs pour transformer, filtrer et combiner des flux de données. Cependant, les générateurs asynchrones sont souvent plus simples à utiliser pour les scénarios d'itération asynchrone de base.

Compatibilité Navigateur et Node.js

Les fonctions génératrices asynchrones sont largement prises en charge dans les navigateurs modernes et Node.js. Elles sont disponibles dans tous les principaux navigateurs qui prennent en charge ES2018 (ECMAScript 2018) et les versions de Node.js 10 et supérieures.

Vous pouvez utiliser des outils comme Babel pour transpiler votre code vers des versions plus anciennes de JavaScript si vous devez prendre en charge des environnements plus anciens.

Conclusion

Les fonctions génératrices asynchrones sont un ajout précieux à la boîte à outils de programmation asynchrone de JavaScript. Elles offrent un moyen puissant et élégant de gérer l'itération asynchrone, facilitant le traitement des flux de données de manière efficace et maintenable. En comprenant les protocoles d'itération asynchrone et la syntaxe des fonctions génératrices asynchrones, vous pouvez tirer parti de leurs avantages dans un large éventail d'applications, de la diffusion de données depuis des API au traitement de fichiers volumineux et à la gestion de flux de données en temps réel.

Pour aller plus loin

• MDN Web Docs : AsyncGeneratorFunction
• Exploring ES2018 : Itération asynchrone
• Documentation Node.js : Consultez la documentation officielle de Node.js pour les flux et les opérations du système de fichiers.