Programmation asynchrone en JavaScript | HTMLGoodies.com

JavaScript est un langage de programmation à thread unique, ce qui signifie qu’une seule tâche peut être exécutée à la fois. Comme il n’y a qu’un seul thread d’exécution, une question se pose : comment les développeurs exécutent-ils une tâche de longue durée sans impacter le thread d’exécution ? Eh bien, la réponse est simple : la programmation asynchrone.

La programmation asynchrone en JavaScript offre un grand ensemble de fonctionnalités pour gérer les opérations d’entrée/sortie (IO) qui sont immédiatement exécutées et n’ont pas de réponse immédiate. De nos jours, la plupart des applications nécessitent une programmation asynchrone d’une manière ou d’une autre. Faire des requêtes AJAX (Asynchronous JavaScript and XML) sur le réseau est un bon cas d’utilisation de la programmation asynchrone en JavaScript.

Dans la section suivante, nous verrons comment la programmation asynchrone affecte le processus de développement.

Traitement de thread unique en JavaScript

JavaScript s’exécute sur un seul thread, ce qui signifie que lorsqu’il est exécuté dans le navigateur, tout le reste s’arrête ; cela est nécessaire car les modifications apportées au DOM ne peuvent pas être effectuées sur des threads parallèles. Considérez une situation où un thread ajoute des éléments enfants au nœud et l’autre redirige une URL – ce n’est pas un scénario idéal.

JavaScript gère le traitement des tâches très rapidement en petits morceaux, de sorte que la plupart des utilisateurs le remarquent rarement. Par exemple, écouter un événement de clic sur un bouton, exécuter le calcul, puis mettre à jour DOM – tout cela est effectué en arrière-plan, caché à l’utilisateur. Une fois cette opération terminée, le navigateur est libre de choisir une nouvelle tâche dans la file d’attente. L’utilisateur, dans ce cas, ne sait pas du tout que la file d’attente existe.

Programmation asynchrone JavaScript et rappels

Le traitement à thread unique n’est pas bien adapté à de nombreuses situations. Considérez un scénario où JavaScript rencontre un processus lent tel que l’exécution d’opérations de données sur un serveur ou l’envoi de requêtes AJAX. Ces opérations peuvent prendre plusieurs secondes voire quelques minutes ; le navigateur sera verrouillé pendant qu’il attend la réponse. Dans le cas de NodeJS, l’application ne pourra pas traiter d’autres demandes.

En JavaScript, la solution est la programmation synchrone. Plutôt que d’attendre qu’une opération se termine, un processus appellerait un autre processus (comme une fonction) lorsque le résultat est prêt. C’est un processus connu sous le nom de Rappeler; il est passé à n’importe quelle fonction asynchrone en tant qu’argument. Voici un exemple d’utilisation Rappels en code JavaScript asynchrone :

 
doCalculationAsync(callback1);
console.log('Process finished');
// call when doCalculationAsync completes
function callback1(error) {
  if (!error) console.log('Calculation completed');
}
 

Ici, doCalculationAsync() accepte une fonction de rappel en tant que paramètre ; rappel1 va être exécuté à un moment donné dans le futur, quelle que soit la durée doCalculationAsync() prendra. Ci-dessous la sortie de ce code une fois exécuté :

Process finished
Calculation completed

Qu’est-ce que l’enfer du rappel ?

Considérez le code suivant :

asyncFunction1((err, res) => {
  if (!err) asyncFunction2(res, (err, res) => {
    if (!err) asyncFunction3(res, (err, res) => {
      console.log('async1, async2, async3 completed');
    });
  });
});

Comme vous pouvez le constater, le code ci-dessus est difficile à comprendre et à gérer ; cela peut s’aggraver lorsqu’une logique de gestion des erreurs y est ajoutée. C’est ce qu’on appelle enfer de rappel.

Côté client, l’enfer des rappels est relativement rare et peut aller jusqu’à trois niveaux si vous effectuez des appels AJAX ou mettez à jour le DOM. Heureusement, cependant, l’enfer du rappel est gérable.

La situation se complique un peu avec les applications côté serveur. Par exemple, une application NodeJS peut s’occuper de recevoir des téléchargements de fichiers, d’écrire des journaux ou d’effectuer d’autres appels d’API. L’enfer du rappel peut vraiment être problématique dans de telles situations.

Javascript moderne propose une approche pour résoudre ce problème appelée promesses.

Empêcher l’enfer des rappels avec des promesses

Les promesses ont été introduites dans ES6. Les promesses sont traitées comme des fonctions wrapper autour des fonctions de rappel. Ils nous permettent de gérer les opérations asynchrones de manière plus gérable. Ils agissent comme un espace réservé pour les valeurs qui ne sont pas connues au moment de la création. Les utilisateurs peuvent joindre un gestionnaire pour une opération réussie ou une raison d’échec. De cette façon, les méthodes asynchrones renvoient des valeurs comme si elles étaient synchrones.

Pour utiliser Promises, nous utilisons le constructeur Promises. Il reçoit deux paramètres : résoudre et rejeter – ces deux éléments sont des rappels. Nous pouvons exécuter toutes les opérations asynchrones dans les rappels, puis les résoudre si elles réussissent ou les rejeter en cas d’échec.

Les promesses peuvent être dans l’un des trois états possibles :

  • En attentePromise n’a pas encore commencé à fonctionner
  • RempliLa promesse se résout après la fin de l’opération
  • rejetéLa promesse ne parvient pas à terminer son opération

Voici un exemple montrant les promesses JavaScript dans le code :

const promise = new Promise((resolve, reject) => {
    if (success) {
      resolve('async action successful!')
    }
    else {
      reject(throw new Error('Something happened. Couldn’t complete async action'))
  }
})

Cette fonction renvoie une nouvelle promesse, qui serait initiée avec un en attendant Etat. Ici, résoudre et rejeter sont des rappels. Lorsqu’une promesse est résolue avec succès, on dit qu’elle est la même rempli alors que, d’autre part, si la promesse échoue à effectuer une opération ou renvoie une erreur, on dit qu’elle est dans un état rejeté Etat.

Utilisons la promesse que nous avons créée ci-dessus :

promise.then((data) => {
  console.log(data) // async action successful!
}).catch((error) => {
  console.log(error) // Something happened. Couldn’t complete async action
}).finally(() => {
  console.log('Run when the promise must have settled')
})

Noter la finalement() Le bloc ici est utilisé uniquement à des fins de nettoyage du code. Il gère d’autres choses lorsque la promesse a terminé ses opérations.

Lire : Programmation asynchrone en ECMAScript.

Chaînage de promesses en JavaScript

L’un des avantages de l’utilisation des promesses est le fait qu’elles peuvent être enchaînées. Il est possible d’en chaîner quelques-unes pour exécuter des tâches asynchrones supplémentaires, l’une après l’autre. Vous trouverez ci-dessous un exemple illustrant comment enchaîner des promesses en JavaScript :

asyncOperation('http://localhost:8080')
  .then(asyncGetSessionDetails)  
  .then(asyncGetUserDetails)      
  .then(asyncLoginAccess)    
  .then(result => {        
    console.log('action completed');  
    return result;            
  })
  .catch(error => {             
    console.log('error occured', error);
  });

Problèmes avec les promesses

Les promesses résolvent le problème de l’enfer des rappels, mais elles introduisent leur propre ensemble de problèmes, notamment :

  • La syntaxe semble plus compliquée que les rappels.
  • Comme la syntaxe est un peu compliquée, le débogage peut être plus difficile.
  • Toute la chaîne de promesses est asynchrone. Toute fonction utilisant une série de promesses doit renvoyer la promesse elle-même.

Asynchrone/Attente en JavaScript

Introduit dans ECMAScript en 2017, Asynchrone/Attente permet d’écrire des promesses d’une manière plus facile et plus attrayante visuellement. Il agit comme sucre syntaxique en plus des promesses. C’était une grande amélioration utilisée pour gérer les opérations asynchrones.

Noter: Les fonctions asynchrones utilisent des promesses sous le capot, il est donc important de comprendre d’abord comment fonctionnent les promesses.

Avec Asynchrone/Attente il est possible d’écrire du code asynchrone basé sur des promesses comme s’il s’agissait de code synchrone sans bloquer le thread principal. Un des autres avantages de Asynchrone/Attente est que nous pouvons nous débarrasser de alors() Chaînes.

Voici un exemple d’utilisation Asynchrone/Attente en Javascript :

async function verifyUserInfo() {
  try {
    const
      connection = await asyncDBconnect('http://localhost:1234'),
      session = await asyncGetSession(connection),
      user = await asyncGetUser(session),
      log = await asyncLogAccess(user);
    return log;
  }
  catch (error) {
    console.log('error', error);
    return null;
  }
}
// self-executing async function
(async () => { await verifyUserInfo(); })();
 

Dans cet exemple, la fonction vérifierInfoUtilisateur() est précédé de la asynchrone mot-clé.

Les méthodes peuvent être rendues asynchrones en écrivant asynchrone devant leur nom ; lorsque de telles méthodes sont appelées, elles renvoient une promesse. Dès que la promesse est retournée, elle doit être résolue ou rejetée.

La attendre Le mot-clé ici est de s’assurer que le traitement est terminé avant l’exécution de la prochaine commande.

Avantages d’Async/Await en JavaScript

Asynchrone/Attente donne une syntaxe meilleure et plus claire et facilite la gestion des opérations asynchrones. Comme la promesse vient avec beaucoup de passe-partout, Asynchrone/Attente mettre un sucre syntaxique dessus. Voyons les avantages de Asynchrone/Attente en Javascript :

  • Syntaxe plus propre avec moins de parenthèses, facilitant le débogage
  • La gestion des erreurs est meilleure ; essayer .. attraper peut être utilisé de la même manière qu’il est utilisé dans le code synchrone.
  • Plus facile à coder

Lis: Testez les méthodes asynchrones à l’aide de runs() et waitFor().

JavaScript asynchrone

La programmation synchrone a toujours été un défi dans le monde de la programmation. Dans ce blog, nous avons parlé de l’évolution de la programmation asynchrone en JavaScript, des rappels aux promesses en passant par Asynchrone/Attente.

JavaScript ne permet qu’une seule chose à la fois car il s’exécute sur un seul thread. Pour accélérer les processus, AJAX a été introduit, ce qui a contribué à faire évoluer la mise à niveau du processus de développement Web. En tenant compte de cela, nous avons discuté de certains principes primaires et avancés de JavaScript afin que vous puissiez gérer intelligemment AJAX et JavaScript asynchrone en 2021.

Leave a Comment

Your email address will not be published. Required fields are marked *