Javascript Attend

| | | |

Introduit dans ES6, Promises vous permet d`écrire facilement du code asynchrone sans avoir à gérer plusieurs fonctions de rappel. Avec les promesses, il n`est pas nécessaire de s`inquiéter des rappels à plusieurs niveaux qui sont à la fois difficiles à écrire et à maintenir.

Il existe une autre fonctionnalité de JavaScript qui facilite encore plus l`écriture de code asynchrone à l`aide de Promises : les fonctions asynchrones / assister à. Ceux-ci - ceux-ci vous permettent d`écrire du code qui effectue des recherches synchrones mais crée des routines asynchrones.

Dans ce guide, nous allons discuter de ce qu`est la fonction asynchrone/attente et comment vous pouvez l`utiliser dans votre code. Commençons

Promesses : un rappel

Avant de commencer à parler des fonctions asynchrones/d`attente, nous devons récapituler les promesses. Une promesse représente une opération asynchrone. Indique le code qu`une opération sera effectuée, et si l`opération réussit, une valeur sera retournée. Sinon, une erreur sera renvoyée au reste du programme.

Une promesse représente une valeur qui n`est pas connue au moment où la promesse a été créée. Une promesse n`est que cela : une promesse que les valeurs futures "seront renvoyées à votre code". Puisque la promesse est un objet, elle doit être en majuscules.

Considérez ce scénario. Vous devez récupérer une ressource à partir d`une API. Il faudra une seconde ou deux pour traiter votre demande. Au lieu que l`utilisateur attende que la demande soit traitée, vous pouvez déplacer votre code vers une promesse afin que le reste de votre programme puisse continuer à fonctionner.

Cela signifie que vous pouvez continuer à rendre une partie de votre l`interface utilisateur du site Web lors de l`extraction des données. Dès qu`une valeur est renvoyée, Promise l`enverra à votre programme principal.

Voici un exemple de promesse :.

Notre retour de code : vos cookies ont été envoyés ! Lorsque nous exécutez la méthode sendCookies.then(), notre promesse est libérée. Notre programme attend 1000 millisecondes, puis renvoie la valeur "Vos cookies ont été envoyés !" " Notre programme principal

Comment utiliser Async et Wait

Dans une fonction et async/wait, une instruction d`attente d`exécution de code se bloque au sein de sa fonction asynchrone jusqu`à ce qu`une promesse soit renvoyée. C`est pourquoi les développeurs prétendent souvent que l`attente asynchrone / asynchrone fonctionne mais regarde les tâches asynchrones s`exécuter.

Considérons l`exemple suivant :.

Notre retour code : vos cookies ont été envoyés ! Notre fonction sendCookies() prend 1000 millisecondes pour renvoyer la valeur "Vos cookies ont été envoyés". Dans ce cas, nous avons déclaré une fonction asynchrone afin que notre code attende qu`une promesse soit résolue ou rejetée.

La fonction "async" Le mot clé indique à notre code que nous voulons effectuer une promesse asynchrone opération dans notre fonction. Le mot "attente" - clé indique que notre code attend le retour de la promesse sendCookies () avant de continuer à exécuter notre programme.

Les fonctions asynchrones renvoient toujours une promesse.

Utilisation de Async et With Attente de plusieurs passes

Les fonctions asynchrones / d`attente sont le plus souvent utilisées lorsqu`il y a plusieurs promesses avec lesquelles vous devez travailler. C`est ce qu`on appelle parfois l`enchaînement des promesses. En effet, votre code attendra une promesse de revenir à chaque étape avant de passer à la suivante :

Notre code renvoie :

Chaque étape prend 1000 millisecondes complètes !. Notre fonction sendCookies() n`est pas exécutée tant que la promesse de retour de notre fonction ProcessOrder() n`est pas exécutée.

Expressions asynchrones

Il existe trois façons d`utiliser une fonction asynchrone/attente.

La première est l`approche que nous avons montrée dans nos derniers exemples : en déclarant des fonctions. Dans nos exemples, nous avons déclaré des fonctions qui renvoient une promesse, nous avons donc utilisé les mots "async" et "expectation" - clé pour exécuter ces fonctions

Vous pouvez également déclarer une fonction asynchrone à l`aide des fonctions de direction :

Ce code renvoie : Vos cookies ont été envoyés ! C`est la même chose que notre premier exemple, mais au lieu de déclarer une fonction principale(), nous avons utilisé une fonction fléchée

De même, vous peut utiliser la syntaxe d`expression de la fonction :.

Ce code retour : Vos cookies ont été envoyés Comme vous pouvez le voir, la sortie est à nouveau l ou elle-même. La seule différence est la façon dont nous avons déclaré notre fonction.

En fait, cette syntaxe est très similaire à notre dernier exemple. Nous utilisons simplement le mot - clé "fonction ()" au lieu d`utiliser une fonction boom.

Il n`y a pas de meilleur moyen de déclarer une fonction asynchrone/attente. Tout dépend du programme que vous écrivez et de la syntaxe que vous préférez. Bien que l`on puisse affirmer que les fonctions de direction sont la méthode la plus concise, d`autres façons de déclarer une fonction asynchrone/attente pourraient être meilleures dans d`autres cas.

Traitement des requêtes Web à l`aide de Async/Wait

L`une des utilisations les plus courantes de la fonction async / est await pour traiter les requêtes Web avec une API basée sur les promesses, Fetch As (). Vous pouvez en savoir plus sur l`utilisation de fetch () dans notre guide du débutant en JavaScript pour rechercher

Prenons cet exemple :

Notre code renvoie :

Lorsque nous exécutons notre fonction retrieveComments (), nous utilisons le mot "attente" - fonction clé pour attendre" l`exécution de notre fetch (). Cela signifie que le reste de notre planification ne se poursuit pas tant que notre requête Web n`a pas été traitée. En effet, la fonction renvoie une promesse.

Lorsqu`une promesse est renvoyée par la fonction fetch() fetch (), nous convertissons la valeur renvoyée en JSON. Nous identifions ensuite l`objet pour récupérer une liste des noms de tous les commentaires et l`afficher sur la console

Comment gérer une erreur

Oh, comme si j`aurais aimé que les erreurs ne se produisent pas dans le code. Mais ils le font, et là, développeurs, nous devons planifier quelque chose. Fonction asynchrone, la gestion des erreurs est effectuée à l`aide d`un try ... catch synchrone. Considérez ce code :.

Notre code renvoie :

Dans notre exemple, nous avons utilisé un .catch () s`il y en avait un de retour. Dans ce cas, nous utilisons require ("Erreur") pour indiquer à notre code qu`une erreur s`est produite.

Si cette instruction est exécutée, notre déclaration .catch () entre en jeu et l`erreur est imprimée.

De même, les fonctions asynchrones peuvent détecter les erreurs de syntaxe :.

Notre code renvoie : NetworkError lors de la tentative de récupération de la ressource. Dans cet exemple, nous avons utilisé une instruction try / catch pour vérifier si notre méthode d`attente a renvoyé une promesse de succès. Encore une fois, notre API est invalide, ce qui fait que notre programme rejette notre promesse. Lorsque cela se produit, le "catch" est exécuté dans notre bloc try/catch, qui consigne notre erreur dans la console.

Conclusion

Les fonctions asynchrones/attente aident à écrire des opérations asynchrones dans le code. Lorsqu`une fonction asynchrone est déclarée, vous pouvez utiliser le mot "waiting" - clé pour attendre le résultat des opérations. Le mot clé wait doit être utilisé avec une fonction qui renvoie une promesse.

Vous êtes maintenant prêt à utilisez des fonctions JavaScript asynchrones / Attendez comme un expert !

Shop

Learn programming in R: courses

$

Best Python online courses for 2022

$

Best laptop for Fortnite

$

Best laptop for Excel

$

Best laptop for Solidworks

$

Best laptop for Roblox

$

Best computer for crypto mining

$

Best laptop for Sims 4

$

Latest questions

NUMPYNUMPY

psycopg2: insert multiple rows with one query

12 answers

NUMPYNUMPY

How to convert Nonetype to int or string?

12 answers

NUMPYNUMPY

How to specify multiple return types using type-hints

12 answers

NUMPYNUMPY

Javascript Error: IPython is not defined in JupyterLab

12 answers

News


Wiki

Python OpenCV | cv2.putText () method

numpy.arctan2 () in Python

Python | os.path.realpath () method

Python OpenCV | cv2.circle () method

Python OpenCV cv2.cvtColor () method

Python - Move item to the end of the list

time.perf_counter () function in Python

Check if one list is a subset of another in Python

Python os.path.join () method