Async et Await en JavaScript sont des mots-clés puissants utilisés pour gérer les opérations asynchrones avec des promesses. Les fonctions asynchrones renvoient implicitement des promesses, tandis que Await suspend l'exécution jusqu'à ce que la promesse soit résolue. Cela simplifie le code asynchrone et améliore la lisibilité en le faisant apparaître synchrone.

Fonction asynchrone

Leasync>La fonction nous permet d'écrire du code basé sur des promesses comme s'il était synchrone. Cela garantit que le thread d’exécution n’est pas bloqué.

• Gestion des promesses : Les fonctions asynchrones renvoient toujours une promesse. Si une valeur renvoyée n'est pas une promesse, JavaScript l'enveloppe automatiquement dans une promesse résolue.

Syntaxe asynchrone

async function myFunction() { return 'Hello'; }>

Exemple: Ici, nous verrons l'utilisation de base de l'async en JavaScript.

const getData = async () =>{ let data = 'Bonjour tout le monde';  renvoyer des données ; } getData().then(data => console.log(data));>

Hello World>

Attendre le mot clé

Leawait>le mot-clé est utilisé pour attendre qu'une promesse soit résolue. Il ne peut être utilisé que dans un bloc asynchrone.

• Pause d'exécution : Await fait attendre le code jusqu'à ce que la promesse renvoie un résultat, permettant un code asynchrone plus propre et plus gérable.

Syntaxe

let value = await promise;>

Exemple : Cet exemple montre l'utilisation de base du mot-clé wait en JavaScript.

const getData = async () =>{ let y = attendre 'Hello World';  console.log(y); } console.log(1); getData(); console.log(2);>

1 2 Hello World>

Le asynchrone Le mot-clé transforme une fonction JavaScript standard en fonction asynchrone, l'amenant à renvoyer une promesse.

Le attendre Le mot-clé est utilisé dans une fonction asynchrone pour suspendre son exécution et attendre la résolution d'une promesse avant de continuer.

Exemple d'asynchrone/d'attente

Ici, nous allons implémenter plusieurs promesses dans une méthode, puis cette méthode que nous utiliserons pour afficher notre résultat. Vous pouvez vérifier le JS syntaxe asynchrone/attente dans l'exemple.

function asynchronous_operational_method() {  let first_promise =   new Promise((resolve, reject) =>résoudre('Bonjour'));  let second_promise = new Promise((resolve, rejet) => { setTimeout(() => { solve(' techcodeview.com..'); }, 1000); });  laissez combiné_promise = Promise.all([first_promise, second_promise]);  retourner la promesse_combinée ; } fonction asynchrone display() { let data = wait asynchronous_operational_method();  console.log(données); } afficher();>

Sortir:

[ 'Hello', ' techcodeview.com..' ]>

Explication:

1. Création de promesse :
   • Deux promesses sont créées : l'une se résout immédiatement avec Hello et l'autre se résout après 1 seconde avec techcodeview.com...
2. Combiner les promesses :
   • La méthode Promise.all() combine les deux promesses en une seule promesse, Combined_promise.
3. Fonction asynchrone :
   • La fonction display() est déclarée asynchrone, indiquant qu'elle contient des opérations asynchrones.
4. En attente de la résolution de la promesse :
   • Le mot-clé wait suspend l'exécution jusqu'à ce que Combined_promise soit résolu.
5. Résultat de la journalisation :
   • Le tableau résolu de Combined_promise est enregistré sur la console.

Note

À résoudre et rejeter sont des arguments prédéfinis par JavaScript.

• La fonction de résolution est utilisée lorsqu'une tâche asynchrone est terminée et renvoie le résultat.
• La fonction de rejet est utilisée lorsqu'une tâche asynchrone échoue et renvoie les raisons de l'échec.

Avantages d'Async et d'Await

1. Lisibilité améliorée : Async et Await permettent d'écrire du code asynchrone dans un style synchrone, ce qui le rend plus facile à lire et à comprendre.
2. La gestion des erreurs : L'utilisation de blocs try/catch avec async/await simplifie la gestion des erreurs.
3. Évite l'enfer des rappels : Async et Await aident à éviter les rappels imbriqués et les chaînes de promesses complexes.
4. Meilleur débogage : Le débogage du code asynchrone/attente est plus intuitif car il se comporte comme du code synchrone.

Conclusion

Async et Await en JavaScript ont révolutionné la programmation asynchrone en rendant le code plus lisible et maintenable. En permettant d'écrire du code asynchrone dans un style synchrone, ils réduisent la complexité associée aux rappels et au chaînage des promesses. Comprendre et utiliser efficacement async et wait peut améliorer considérablement vos compétences en programmation JavaScript, facilitant ainsi la gestion des opérations asynchrones dans vos projets.

Navigateurs pris en charge :

Les navigateurs supportés par le JS Fonction asynchrone/attente sont listés ci-dessous :

alphabet numéroté

• Google Chrome 55 et supérieur
• Firefox 52 et supérieur
• Apple Safari 10.1 et supérieur
• Opéra 42 et supérieur
• Bord 14 et supérieur