Malgré toutes les fonctionnalités sophistiquées intégrées aux langages de programmation modernes, sous le capot, elles sont encore assez primitives. Sans programmation asynchrone, de longs appels à des services externes auraient hâte l'exécution du programme. Async / await corrige ce problème.

Pourquoi utiliser Async / Await?

La plupart des programmes utilisent un thread principal et exécutent les instructions du processeur de manière séquentielle, mais plus important encore, de manière synchrone. Si vous devez récupérer une valeur de la mémoire, vous êtes coincé dans l'IOWait pendant un moment, en attendant que votre RAM renvoie une réponse. Si vous devez récupérer une valeur sur un disque, vous pourriez être bloqué pendant un certain temps (d'où la raison pour laquelle la RAM est si utile).

Mais si vous récupérez quelque chose sur un serveur distant, vous avez maintenant un gros problème. Cela pourrait prendre 5 secondes ou plus pour que le serveur renvoie une réponse, et sur un programme à un seul thread, cela bloquerait l'exécution principale, provoquant le blocage de votre page et le départ de vos utilisateurs.

La programmation asynchrone est là pour sauver les utilisateurs. En JavaScript, la forme la plus élémentaire de code asynchrone consiste à transmettre un rappel, généralement une fonction anonyme, qui s'exécutera une fois la requête Web terminée. Vous pouvez le faire en utilisant Ajax ainsi que d'autres bibliothèques de requêtes.

ajax ('https://example.com/api', (réponse) => {
   console.log (réponse);
});

Cela peut devenir très compliqué lors du traitement de plusieurs requêtes simultanées et de nombreuses fonctions, donc JavaScript créé Promesses. Ce sont des objets wrapper qui représentent des variables asynchrones qui récupèrent encore leurs valeurs. Des promesses peuvent être renvoyées lors de l'utilisation de fonctions telles que JavaScript intégrées chercher. Vous pouvez enregistrer une fonction de rappel en utilisant .puis(), qui vous permet d'enchaîner plusieurs demandes.

récupérer ('http://example.com/api')
  .then (réponse => réponse.json ())
  .then (données => console.log (données));

Le retour d'un objet comme celui-ci permet d'utiliser d'autres fonctionnalités telles que Promesse.Tout, qui peut exécuter plusieurs promesses et exécuter un seul rappel une fois qu'elles sont toutes terminées.

Il s’agit d’une avancée considérable, mais cela ne fait que déplacer le problème. Écrire un code comme celui-ci est toujours contre-intuitif, il faut gérer toutes les promesses en cours et s'assurer que tout est en ordre. Si le reste de votre code dépend du résultat de la promesse, vous devrez déplacer ce code dans le .puis bloquer ou appeler une fonction distincte avec les données.

Idéalement, il serait préférable de ne pas avoir à se soucier des promesses et des rappels. Vous souhaitez écrire du code comme celui-ci, mais JavaScript arrêtera l'exécution du programme ou l'exécutera dans le désordre.

faire quelque chose();
var response = fetch ('http://example.com/api');
console.log (response.json ());

Mais il existe un meilleur moyen: asynchroniser / attendre. Vous devrez toujours travailler avec les promesses à la fin de la journée, mais async / await offre une meilleure syntaxe pour les utiliser.

Pour l'utiliser, vous devez spécifier la fonction en tant que asynchrone fonction. Cela garantit que la fonction renvoie une promesse sur laquelle JavaScript peut agir lors de l'appel de cette fonction. La vraie magie se produit avec attendre, que vous pouvez ajouter avant une promesse pour indiquer au moteur JavaScript que cette fonction va prendre un peu de temps, et il devrait mettre en pause votre fonction asynchrone jusqu'à son retour, libérant ainsi du temps pour effectuer d'autres actions et maintenir votre application en cours d'exécution.

asynchrone function fetchAPI () {
    faire quelque chose();
    réponse var = attendre chercher ('http://example.com/api');
    console.log (response.json ());
}

fetchAPI ();

Désormais, tout dans le bloc asynchrone s’exécute dans l’ordre mais n’interrompt pas l’exécution du programme pour ce faire. Tout ce qui vient après fetchAPI () sera toujours en panne, car fetchAPI () démarre simplement l'exécution d'une fonction asynchrone.

Vous pouvez essentiellement penser à attendre comme quelque chose que vous ajouterez aux demandes Web et à d'autres choses qui prennent un certain temps pour renvoyer une réponse. Il ne peut être utilisé que dans une fonction asynchrone, et vous l'utilisez pour attendre explicitement une fonction qui renvoie une promesse, plutôt que d'appeler .Ensuite() et en passant un rappel.

Async / Attendre dans d'autres langues

Async / Await n'est pas seulement un concept JavaScript; c'est une fonctionnalité dans de nombreux autres langages de programmation, bien que l'implémentation exacte puisse différer un peu.

Par exemple, C # a des tâches, qui fonctionnent comme des promesses et représentent une opération asynchrone qui renvoie quelque chose. Vous pouvez attendre d'autres tâches dans la fonction asynchrone, permettant un code non bloquant pour des opérations telles que la récupération de requêtes Web et l'écriture / lecture à partir d'un disque ou de banques de données externes telles que des compartiments S3.

Vous pouvez les enchaîner en utilisant .ContinueWith (rappel):

En fonction de votre application, vous devrez peut-être vérifier à plusieurs reprises dans le thread principal si la tâche est terminée. Par exemple, vous pouvez avoir une co-routine qui s'exécute une fois par image et vérifie si la tâche s'est terminée avec le .IsComplété champ. Si ce n’est pas le cas, il cède jusqu’à la prochaine image et si c’est le cas, il peut continuer le traitement de manière synchrone.