Exécution asynchrone en javascript

Dans de nombreux langages de programmation, les processus asynchrones sont gérés en générant un nouveau fil qui fonctionne en arrière-plan. Cependant, en JavaScript, nous avons un concept appelé le contexte d'exécution et la boucle d'événements, ce qui empêche le reste du code d'exécuter. Lorsque le contexte d'exécution découvre ce code bloque dans un programme, il les renvoie à la boucle d'événement pour l'exécution avant de les retourner à la pile d'appels. Il existe trois types de base de méthodes de code asynchrones dans la programmation JavaScript: les rappels, les promesses et les mots clés asynchronisés / attendre.

Cet article discutera Exécution asynchrone en javascript. De plus, nous démontrerons également les méthodes JavaScript pour exécuter l'exécution asynchrone, telles que Rappels, Promesses, asynchrone / attendre, avec l'aide d'exemples. Alors, commençons!

Rappels avec exécution asynchrone en javascript

Les rappels sont l'un des styles de codage les plus courants pour exprimer et gérer l'exécution asynchrone en JavaScript. C'est un type de fonction qui doit être appelé une fois qu'une autre fonction a terminé son exécution. La fonction de rappel est invoquée avec la réponse lorsque l'opération spécifiée est terminée. Supposons que vous souhaitiez vous assurer qu'un morceau de code particulier de votre programme JavaScript ne s'exécute pas avant que l'autre termine son exécution. Dans ce cas, vous pouvez réaliser cette fonctionnalité en utilisant la fonction de rappel.

Exemple: rappels avec exécution asynchrone en javascript

Laissez-nous vous donner un exemple qui vous aidera à ce que nous avons dit. Considérez un scénario dans lequel vous devez écrire une chaîne sur un flux de documents après 7 secondes. Dans ce cas, vous pouvez utiliser le «setTimeout ()”Fonction intégrée JavaScript qui évalue une expression ou appelle n'importe quelle fonction après une durée spécifiée. Dans notre cas, nous avons utilisé la fonction «setTimeout ()» pour invoquer la définie «myFunction ()"Après 7 secondes:

Attendez 7 secondes (7000 millisecondes)

Vous pouvez exécuter l'exemple donné ci-dessus dans votre éditeur de code préféré ou n'importe quel bac à sable codant en ligne,; Cependant, nous utiliserons le JSBIN à des fins de démonstration:

Après avoir exécuté le programme JavaScript fourni, il vous sera demandé d'attendre «7 secondes»:

Après 7 secondes, la chaîne "Exécution asynchrone en javascript»Sera affiché en sortie:

Promesses avec une exécution asynchrone en javascript

Lorsque vous enchaînez plusieurs appels de fonction, l'un des principaux problèmes des rappels est qu'il devient difficile de suivre le flux de l'exécution. Le ".alors()"Syntaxe dans"Promesses"Vous sauve dans une telle situation tout en vous permettant de faire la chaîne des promesses ensemble. Il vous permet de lier les gestionnaires avec la valeur asynchrone ajoutée du succès ou la cause de l'échec. En conséquence, les méthodes asynchrones se comporteront de la même manière que les méthodes synchrones.

Plutôt que de fournir la valeur finale immédiatement, la technique asynchrone renvoie une promesse qui offre la valeur qui peut être utilisée dans le traitement ultérieur. Votre objet Promises peut être dans l'un des trois états: en attente, rempli ou rejeté:

• En attente: Avant qu'une opération ne se produise, la promesse ajoutée est dans un état en attente.
• Réalisé: L'état accompli d'une promesse signifie que l'opération supplémentaire a été achevée.
• Rejeté: Lorsqu'une valeur d'erreur est lancée pour l'opération incomplète, la promesse relève de l'état rejeté.

Exemple: promesses avec une exécution asynchrone en javascript

Pour montrer le fonctionnement des promesses avec l'exécution asynchrone en JavaScript, premièrement, nous définirons un «voir le message()”Fonction qui sera invoquée à la fois pour le succès et l'échec de la promesse ajoutée:

L'exécution du code-donné ci-dessus vous montrera la sortie suivante:

Maintenant, exprès, nous modifierons la valeur de la variable "un«Pour vérifier si le rappel pour l'échec de la promesse fonctionne ou non:

Comme vous pouvez le voir, le rappel de l'échec s'affiche «Erreur rencontrée”String en fonction de notre codage du programme JavaScript:

Async / Await avec une exécution asynchrone en JavaScript

Le "asynchrone" et "attendre»Des mots clés sont ajoutés à la version la plus récente de JavaScript. Ces mots clés facilitent l'écriture d'écriture et permettent à l'utilisateur d'avoir un contrôle complet sur la séquence de l'exécution des promesses. La fonction asynchrone renvoie toujours des promesses et la fonction d'attente est utilisée dans la fonction asynchrone pour arrêter l'exécution de la méthode ajoutée en attendant que la promesse se résout. Après cela, il reprendra l'exécution de la fonction et sortira la valeur résolue.

Exemple: asynchrone avec exécution asynchrone en javascript

Maintenant, dans le même exemple, nous ajouterons un Async MyFunction () qui renvoie une promesse:

Jetez un œil au code fourni et à sa sortie:

Exemple: attendez avec une exécution asynchrone en javascript

Dans cet exemple, nous ajouterons d'abord le «asynchrone”Mot-clé avec la définition de la fonction showMessage () pour étendre une promesse. Après cela, nous spécifierons «attendre"Avec le créé"ma promesse”Objet pour qu'il attend la mypromise:

Voici la sortie que nous avons obtenue en exécutant l'exemple ci-dessus:

Conclusion

Les rappels, les promesses et les mots clés asynchronisés / attend sont les trois méthodes pour gérer l'exécution asynchrone en JavaScript. Les rappels permettent d'accéder aux fonctions lorsque la méthode asynchrone a terminé l'exécution; Les promesses aident à enchaîner la méthode ensemble, et le mot-clé async / attente fournit un contrôle supplémentaire sur les promesses. Cet article a discuté de l'exécution asynchrone en javascript. De plus, nous avons également démontré les méthodes d'exécution asynchrones telles que les rappels, les promesses, async / attendre en JavaScript avec des exemples.