Utilisation d'async / attendre en javascript avec des exemples
- 3490
- 81
- Victor Charpentier
Async / Await est une caractéristique de JavaScript qui permet aux développeurs d'écrire du code asynchrone d'une manière plus synchrone. Avec Async / Await, les développeurs peuvent écrire du code qui attend une opération asynchrone à terminer, sans bloquer le fil principal de l'exécution.
Dans cet article, nous explorerons comment utiliser Async / Await en JavaScript avec quelques exemples.
Syntaxe d'Async / Await
La syntaxe de asynchrone / attendre est assez simple. Pour définir une fonction asynchrone, vous ajoutez le mot-clé asynchronisé avant le mot clé de la fonction, comme ceci:
fonction async getData () // le code asynchronisé va ici| 123 | fonction async getData () // le code asynchronisé va ici |
À l'intérieur de asynchrone Fonction, vous pouvez utiliser le mot-clé Await pour attendre une promesse à résoudre, comme ceci:
fonction async getData () const de réponse = attendre fetch ('https: // api.exemple.com / data '); const Data = attendre la réponse.JSON (); retourner les données;| 12345 | fonction async getData () const de réponse = attendre fetch ('https: // api.exemple.com / data '); const Data = attendre la réponse.JSON (); retourner les données; |
Dans cet exemple, nous utilisons la fonction Fetch pour faire une demande HTTP, puis utilisons le mot-clé Await pour attendre que la réponse soit renvoyée. Nous utilisons ensuite à nouveau le mot-clé Await pour attendre que les données JSON soient analysées avant de les retourner.
Exemple: récupérer les données d'une API à l'aide d'async / attendre
Examinons de plus près comment utiliser Async / Await pour récupérer les données d'une API. Dans cet exemple, nous utiliserons la fonction Fetch pour faire une demande HTTP à l'API GitHub, puis utiliser Async / Await pour attendre que la réponse soit renvoyée.
fonction async fetchgithubuser (nom d'utilisateur) const url = 'https: // api.github.com / utilisateurs / $ nom d'utilisateur '; const Response = attendre fetch (URL); const Data = attendre la réponse.JSON (); retourner les données; fetchgithubuser ('octocat') .alors (data => console.journal (données)) .Catch (erreur => console.erreur (erreur));| 12345678910 | fonction async fetchgithubuser (nom d'utilisateur) const url = 'https: // api.github.com / utilisateurs / $ nom d'utilisateur '; const Response = attendre fetch (URL); const Data = attendre la réponse.JSON (); return data; fetchgithubuser ('octocat') .alors (data => console.journal (données)) .Catch (erreur => console.erreur (erreur)); |
Dans cet exemple, nous définissons une fonction asynchrone appelée fetchgithubuseur qui prend un nom d'utilisateur github comme paramètre. À l'intérieur de la fonction, nous construisons l'URL de la demande de l'API, utilisons la fonction Fetch pour faire la demande, puis utilisons le mot-clé Await pour attendre que la réponse soit renvoyée. Nous utilisons ensuite à nouveau le mot-clé Await pour attendre que les données JSON soient analysées avant de les retourner.
Pour appeler la fonction asynchrone, nous utilisons la syntaxe de promesse standard, avec un .alors() Méthode pour gérer le cas de réussite et un .attraper() Méthode pour gérer toutes les erreurs.
Exemple: utiliser des promesses avec async / attendre
Parfois, vous devrez peut-être utiliser des promesses avec async / attendre. Dans cet exemple, nous utiliserons le Promesse.tous() Méthode pour effectuer plusieurs demandes d'API en parallèle, puis utiliser Async / Await pour attendre toutes les demandes à compléter avant de continuer.
| 1234567891011121314151617 | fonction async fetchgithubdata () const urls = ['https: // api.github.com / utilisateurs / octocat ',' https: // api.github.com / utilisateurs / mojombo ',' https: // api.github.com / utilisateurs / defunkt ']; Const Promises = URL.map (url => fetch (url)); Réponses de const = attendre la promesse.Tous (promesses); const Data = attendre la promesse.toutes (réponses.map (réponse => réponse.JSON ())); retourner les données; fetchgithubdata () .alors (data => console.journal (données)) .Catch (erreur => console.erreur (erreur)); |
Dans cet exemple, nous définissons une fonction asynchrone appelée fetchgithubdata qui construit un tableau d'URL de demande d'API, puis utilise le carte() Méthode pour créer un tableau de promesses qui rapporteront les données de chaque URL. Nous utilisons ensuite le Promesse.tous() Méthode pour attendre toutes les demandes à compléter avant de continuer.
Après avoir reçu toutes les réponses, nous utilisons le carte() Méthode à nouveau pour créer un éventail de promesses qui analyseront les données JSON à partir de chaque réponse. Nous utilisons ensuite à nouveau le mot-clé Await pour attendre toutes ces promesses de terminer avant de retourner les données comme un tableau d'objets.
Meilleures pratiques pour utiliser l'async / attendre
Voici quelques meilleures pratiques pour utiliser Async / Await dans votre code JavaScript:
- Gérer toujours les erreurs: Le code asynchrone peut être sujet aux erreurs, il est donc important de toujours les gérer correctement. Vous pouvez utiliser Essayer / attraper blocs pour attraper des erreurs dans une fonction asynchrone, ou vous pouvez utiliser le
.attraper()Méthode sur une promesse de gérer les erreurs dans le code d'appel. - Ne dépassez pas l'async / attendre: Alors que l'async / attendre peut rendre le code asynchrone plus facile à lire et à écrire, ce n'est pas toujours nécessaire ou approprié. Utilisez uniquement l'async / attendre que lorsque vous devez attendre une promesse à résoudre avant de continuer.
- Utiliser la promesse.all () pour les demandes parallèles: Si vous devez faire plusieurs demandes d'API en parallèle, utilisez le
Promesse.tous()Méthode pour attendre toutes les demandes à compléter avant de continuer. - Ne bloquez pas le fil principal: N'oubliez pas que le code asynchrone est censé s'exécuter en arrière-plan, alors évitez de bloquer le thread principal de l'exécution. Si votre code prend beaucoup de temps à fonctionner, envisagez d'utiliser un travailleur Web pour l'exécuter en arrière-plan.
- Gardez les fonctions petites et concentrées: Comme pour toute fonction, il est important de garder les fonctions asynchrones petites et concentrées. Si une fonction fait trop, pensez à la diviser en fonctions plus petites et plus ciblées.
Conclusion
Async / Await est une fonctionnalité puissante de JavaScript qui peut rendre le code asynchrone plus facile à lire et à écrire. En utilisant le mot-clé Await pour attendre que les promesses se résolvent, vous pouvez écrire du code qui ressemble et se sent plus comme un code synchrone. N'oubliez pas de gérer correctement les erreurs, utilisez la promesse.tout () pour les demandes parallèles et évitez de bloquer le thread principal de l'exécution.