Maîtriser Async/Await : gestion des chaînes de fonctions asynchrones en JavaScript

Gérer le chaînage de fonctions asynchrones en JavaScript

Les opérations asynchrones sont un élément clé de la programmation JavaScript moderne, permettant une exécution non bloquante dans des environnements tels que les navigateurs et Node.js. Cependant, gérer le flux de fonctions asynchrones qui s'appellent entre elles peut s'avérer délicat, surtout lorsque l'on souhaite attendre la dernière fonction de la chaîne sans interrompre l'ensemble du processus.

Dans ce scénario, nous nous appuyons souvent sur JavaScript asynchrone/attendre et Promesses pour gérer des flux asynchrones complexes. Mais il existe des cas où l'utilisation de promesses ou l'attente de chaque appel de fonction ne convient pas, par exemple lorsque le programme doit poursuivre son exécution sans attendre une réponse immédiate. Cela introduit un nouveau défi pour les développeurs.

L'exemple que vous avez fourni présente une situation courante dans laquelle plusieurs fonctions sont déclenchées de manière asynchrone et nous avons besoin d'un moyen de détecter quand la dernière fonction a été appelée. L'utilisation de promesses traditionnelles ici peut être limitante car elle arrête la fonction appelante, la forçant à attendre le résultat au lieu de continuer son flux.

Dans cet article, nous allons explorer comment résoudre ce problème avec JavaScript. asynchrone/attendre mécanisme. Nous examinerons une approche pratique pour garantir que la fonction principale peut se dérouler sans attente directe, tout en rattrapant l'achèvement de la dernière fonction de la chaîne.

Comprendre la gestion des fonctions asynchrones avec Async/Await et les rappels

Le premier script utilise asynchrone/attendre pour gérer l’exécution de fonctions asynchrones. Le asynchrone Le mot-clé permet aux fonctions de renvoyer une promesse, ce qui facilite la gestion séquentielle des opérations asynchrones. Dans ce cas, functionFirst est responsable de l'appel de functionSecond de manière asynchrone en utilisant setTimeout. Même si functionFirst n'attend pas la fin de functionSecond, nous utilisons attendre dans functionMain pour garantir que le thread principal attend la fin de toutes les opérations asynchrones avant de continuer. Cela permet un meilleur contrôle sur le flux des événements asynchrones tout en conservant un comportement non bloquant en JavaScript.

Le principal avantage de cette approche est que nous pouvons gérer des flux asynchrones complexes sans bloquer l’exécution d’autres fonctions. Au lieu de forcer le programme à attendre à chaque appel de fonction, async/await permet au code de continuer à s'exécuter en attendant que les promesses soient résolues en arrière-plan. Cela améliore les performances et maintient l'interface utilisateur réactive dans les applications frontales. Le délai dans chaque fonction simule une tâche asynchrone réelle, telle qu'une requête de serveur ou une requête de base de données. Le mécanisme Promise se résout lorsque toutes les fonctions de la chaîne sont exécutées, garantissant que l'instruction de journal finale n'apparaît qu'une fois que tout est terminé.

Dans la deuxième solution, nous utilisons rappels pour obtenir un flux asynchrone non bloquant similaire. Lorsque functionFirst est appelé, il déclenche functionSecond et revient immédiatement sans attendre son achèvement. La fonction de rappel passée en argument aide à contrôler le flux en déclenchant la fonction suivante de la chaîne lorsque la fonction actuelle se termine. Ce modèle est particulièrement utile dans les environnements où nous avons besoin d'un contrôle plus direct sur l'ordre d'exécution sans utiliser de promesses ou d'async/wait. Cependant, les rappels peuvent conduire à un « enfer des rappels » lorsqu’il s’agit de chaînes profondes d’opérations asynchrones.

Enfin, la troisième solution utilise Émetteur d'événements Node.js pour gérer les appels asynchrones de manière plus sophistiquée. En émettant des événements personnalisés après la fin de chaque fonction asynchrone, nous obtenons un contrôle total sur le moment où déclencher la fonction suivante. La programmation basée sur les événements est particulièrement efficace dans les environnements back-end, car elle permet un code plus évolutif et plus maintenable lorsqu'il s'agit de plusieurs opérations asynchrones. Le émettre La méthode envoie des signaux lorsque des événements spécifiques se produisent et les écouteurs gèrent ces événements de manière asynchrone. Cette méthode garantit que la fonction principale ne continue qu'une fois la dernière fonction de la chaîne exécutée, offrant ainsi une approche plus modulaire et réutilisable de la gestion des tâches asynchrones.

// Solution 1: Using async/await with Promises in JavaScript
async function functionFirst() {
  console.log('First is called');
  setTimeout(functionSecond, 1000);
  console.log('First fired Second and does not wait for its execution');
  return new Promise(resolve => {
    setTimeout(resolve, 2000); // Set timeout for the entire chain to complete
  });
}

function functionSecond() {
  console.log('Second is called');
  setTimeout(functionLast, 1000);
}

function functionLast() {
  console.log('Last is called');
}

async function functionMain() {
  await functionFirst();
  console.log('called First and continue only after Last is done');
}

functionMain();

// Solution 2: Using Callbacks to Manage Asynchronous Flow Without Blocking
function functionFirst(callback) {
  console.log('First is called');
  setTimeout(() => {
    functionSecond(callback);
  }, 1000);
  console.log('First fired Second and does not wait for its execution');
}

function functionSecond(callback) {
  console.log('Second is called');
  setTimeout(() => {
    functionLast(callback);
  }, 1000);
}

function functionLast(callback) {
  console.log('Last is called');
  callback();
}

function functionMain() {
  functionFirst(() => {
    console.log('called First and continue only after Last is done');
  });
}

functionMain();

// Solution 3: Using Node.js EventEmitter to Handle Asynchronous Functions
const EventEmitter = require('events');
const eventEmitter = new EventEmitter();

function functionFirst() {
  console.log('First is called');
  setTimeout(() => {
    eventEmitter.emit('secondCalled');
  }, 1000);
  console.log('First fired Second and does not wait for its execution');
}

function functionSecond() {
  console.log('Second is called');
  setTimeout(() => {
    eventEmitter.emit('lastCalled');
  }, 1000);
}

function functionLast() {
  console.log('Last is called');
}

eventEmitter.on('secondCalled', functionSecond);
eventEmitter.on('lastCalled', functionLast);

function functionMain() {
  functionFirst();
  eventEmitter.on('lastCalled', () => {
    console.log('called First and continue only after Last is done');
  });
}

functionMain();

Techniques avancées pour gérer l'exécution de fonctions asynchrones en JavaScript

Lors de l'utilisation asynchrone/attendre et rappels sont efficaces pour gérer les flux asynchrones en JavaScript, un autre outil puissant qui mérite attention est l'utilisation de JavaScript générateurs combiné avec une fonctionnalité asynchrone. Une fonction de générateur vous permet de redonner le contrôle à l'appelant, ce qui la rend parfaite pour gérer les processus itératifs. En couplant les générateurs avec Promesses, vous pouvez suspendre et reprendre l'exécution de manière encore plus contrôlée, offrant ainsi une autre couche de flexibilité pour les flux de travail asynchrones.

Les générateurs peuvent être particulièrement utiles dans les scénarios où vous avez besoin d'un contrôle plus granulaire sur les appels de fonctions asynchrones. Ils fonctionnent en vous permettant d'exécuter l'exécution à des points spécifiques et d'attendre la reprise d'un signal externe ou d'une promesse de résolution. Ceci est utile dans les cas où vous avez des dépendances complexes entre les fonctions ou avez besoin d'opérations non bloquantes sur plusieurs étapes. Bien que asynchrone/attendre est souvent plus simple, l'utilisation de générateurs vous donne la possibilité de contrôler le flux asynchrone de manière plus personnalisée.

Une autre considération importante est la gestion des erreurs dans le code asynchrone. Contrairement aux opérations synchrones, les erreurs dans les fonctions asynchrones doivent être détectées via essayer/attraper blocages ou en traitant les promesses rejetées. Il est important de toujours inclure une gestion appropriée des erreurs dans vos flux de travail asynchrones, car cela garantit que si une fonction de la chaîne échoue, cela n'interrompra pas l'ensemble de l'application. L'ajout de mécanismes de journalisation à vos opérations asynchrones vous permettra également de suivre les performances et de diagnostiquer les problèmes dans les flux asynchrones complexes.