Quelles sont les fonctions asynchrones / attend en javascript

Quelles sont les fonctions asynchrones / attend en javascript

Comme nous le savons tous, la nature filetée unique de JavaScript le rend synchrone; Les fonctions asynchrones sont donc nécessaires pour effectuer une tâche asynchrone. Les fonctions asynchrones nous permettent d'effectuer une action sans attendre que l'action précédente se termine. Cela signifie qu'il y a une boucle d'événement qui vous permet de faire la queue d'une tâche (Quand il demande des ressources) et passer au suivant.

JavaScript propose de nombreuses fonctionnalités qui peuvent rendre le code asynchrone; asynchrone attendre les fonctions en fait partie. Le fonctions asynchrones / attend ne sont que du sucre syntaxtique au-dessus des fonctionnalités déjà présentes en javascript. Ils fournissent un moyen simple de gérer le code asynchrone. Le fonctions asynchrones / attend peut être échangé avec des promesses dans le code JavaScript et le code fonctionnera parfaitement bien

Les cerveaux humains ne sont pas conçus pour gérer efficacement l'asynchronie. Le fonctions asynchrones / attend Permettez-nous d'écrire du code qui semble synchronisé mais l'exécute de manière asynchrone.

Cet article vous aidera à apprendre asynchrone et attendre les fonctions en javascript.

Pourquoi utiliser les fonctions asynchrones / attend?

Voici les raisons pour lesquelles fonctions asynchrones / attend doit être utilisé dans le code JavaScript:

  • Nous pouvons écrire du code propre et concis avec quelques erreurs en utilisant asynchrone / attendre. Cela augmentera la lisibilité d'un code imbriqué et complexe.
  • Aider Débogage. Les erreurs peuvent être traitées en un seul endroit en utilisant Try / Catch.
  • Le fonctions asynchrones / attend Ayez une pile d'erreur appropriée, contrairement à la pile ambiguë reçue par Promise, ce qui rend difficile la recherche où l'erreur s'est produite.

Comment utiliser l'async dans JavaScript

Asynchrone est un mot-clé qui peut être utilisé pour la déclaration de fonctions synchrones. À travers le fonction asynchrone, Vous pouvez vous assurer de ne pas casser le fil de l'exécution, qui peut être écrit comme la synchronisation du code basé sur les promesses.

Caractéristiques de la fonction asynchrone

  • Fonctionne de manière asynchrone à travers une boucle d'événement
  • Renvoie toujours une valeur
  • Il vérifie qu'une promesse revient, et si elle ne le fait pas, JavaScript l'enveloppe automatiquement avec la promesse qu'il résout à cette valeur

Syntaxe de la fonction asynchrone

La syntaxe du fonction asynchrone est comme suit:

Nom de la fonction asynchrone ([param1 [, param2 [,… param3]]])
affirmations

Ici, le nom représente le nom de la fonction, les params représentent le nom des paramètres à passer dans la fonction, et les instructions contiennent le corps de la fonction et une ou plusieurs expressions d'attente utilisées dans la fonction asynchrone.

Un exemple simple de fonction asynchrone

const getData = async () =>
var data = "Hello World";
retourner les données;

getData ().alors (data => console.log (données));

Jetons un coup d'œil à un autre exemple:

fonction asynchrone foo ()
attendre 1;

La fonction ci-dessus est équivalente à la fonction suivante:

fonction foo ()
promesse de retour.résoudre (1).alors (() => indéfini)

L'exemple ci-dessus représente que le code après chaque expression d'attente est susceptible d'être dans le rappel I.e .alors. Grâce aux fonctions, la chaîne de promesses est automatiquement construite étape par étape à chaque étape de réintégration. La valeur de retour forme la dernière étape de la chaîne.

Comment utiliser Await en JavaScript

Le but de l'expression attend est d'attendre JavaScript avant le résultat de la promesse. Il est important de noter que cela ne fera que faire la queue d'un bloc de fonction asynchrone, pas l'exécution de l'ensemble du programme.

Caractéristiques de la fonction Await

  • Ne peut être utilisé que dans des blocs asynchrones.
  • Fait attendre le code que la promesse renvoie un résultat.
  • Seuls les blocs asynchrones continueront d'attendre.

Syntaxe de la fonction attend

La syntaxe de l'expression d'attente est la suivante:

[rv] = attendre [Expression]

Ici, attendez représente toute valeur à attendre ou à promettre, RV renvoie la valeur en cas de promesse, sinon renvoie la valeur attendue de la promesse.

Un exemple simple d'expression d'attente

const getData = async =>
var y = attendre "Hello World";
console.journal (y);

console.journal (1);
getData ();
console.journal (2);

Javascrip Exécute le code séquentiellement.

Dans l'exemple ci-dessus, nous pouvons voir que le console.journal (1) a été imprimé en premier comme prévu. Après cela le fonction getData () a été appelé là où nous avons initié une variable avec le nom de Y et nous avons utilisé le mot-clé Await.

Le mot-clé Await fera l'arrêt du JS à l'arrêt ou de la pause dans cette ligne I-E où nous avons écrit "Hello World". Il n'autorisera pas l'exécution de code supplémentaire jusqu'à ce que l'appel de fonction asynchrone renvoie le résultat. Il enverra cette tâche à la file d'attente des tâches et les prochaines lignes de code commenceront à s'exécuter.

Dans la ligne suivante après avoir appelé la fonction getData () Nous sommes la console qui enregistre les 2 à la fenêtre de la console. Par conséquent, nous avons vu 2 avant «Bonjour le monde".

Maintenant après ça quand le Fonction d'appel asynchrone Renvoie le résultat uniquement alors que le code reprendra pour exécuter à nouveau et nous voyons donc «Bonjour le monde”À la fin de la fenêtre de la console.

Conclusion

Les fonctions asynchrones et attend sont un excellent moyen de gérer le code asynchrone en JavaScript car ils fournissent une syntaxe claire et concise. Dans cet article, nous avons exploré le concept de fonctions async / attend en javascript. Dans la première moitié de l'article, nous avons exploré quelles sont les fonctions asynchrones / attend et pourquoi nous devrions les utiliser. Ensuite, nous avons exploré leurs fonctionnalités et leur syntaxe avec des exemples.