Introduction à JavaScript Asynchrone

Qu'est-ce que la Programmation Asynchrone ?

La programmation asynchrone permet à votre code d'exécuter des opérations non bloquantes. Contrairement à la programmation synchrone—où chaque opération attend que la précédente soit terminée avant de continuer—la programmation asynchrone permet à d'autres tâches de se poursuivre sans attendre qu'une tâche précédente soit terminée.

C'est crucial dans le développement web, où vous pouvez avoir besoin d'effectuer des tâches qui prennent du temps, comme récupérer des données d'une API, attendre une entrée utilisateur ou définir des minuteries.

Imaginez que nous développons un programme où 1 et 2 sont des requêtes serveur, et 3, 4, et 5 sont d'autres opérations comme la gestion des interactions utilisateur.

Dans le modèle synchrone, les tâches 1 et 2 bloquent l'exécution de 3, 4, et 5 jusqu'à ce qu'elles soient terminées. Par exemple, si un utilisateur publie un commentaire (1) puis essaie d'ouvrir une barre latérale (3), l'interface se figera jusqu'à ce que le commentaire soit traité, créant des délais.

Dans le modèle asynchrone, les requêtes serveur (1 et 2) ne bloquent pas le programme. En attendant une réponse, le programme continue avec d'autres tâches (3, 4, et 5). Cela permet à l'utilisateur d'interagir avec la barre latérale immédiatement après avoir posté le commentaire, améliorant ainsi la réactivité.

Différences entre le comportement synchrone et asynchrone

Programmation synchrone

Dans la programmation synchrone, les tâches sont exécutées l'une après l'autre. Chaque tâche doit être terminée avant que la suivante ne commence. Si une tâche prend beaucoup de temps (par exemple, un téléchargement de fichier volumineux), elle bloque toutes les tâches suivantes, ce qui peut rendre l'application non réactive.


              123
            
console.log('Task 1: Start');
for (let i = 0; i < 1000000000; i += 1) {} // Simulate a long-running task
console.log('Task 2: After long task');

Dans cet exemple, la Tâche 2 ne s'exécutera qu'après la fin de la tâche de longue durée (la boucle). Cela bloque l'exécution du code et peut geler le navigateur.

Programmation Asynchrone

Dans la programmation asynchrone, les tâches peuvent être initiées puis exécutées plus tard sans bloquer d'autres codes. Cela permet à d'autres tâches de continuer en attendant que des opérations de longue durée (par exemple, la récupération de données) soient terminées. Cela garantit que des tâches comme les requêtes réseau ou les minuteries ne stoppent pas le flux d'autres opérations de votre application.

index.html

index.css

index.js

Dans cet exemple, la Tâche 1 s'exécute immédiatement, la Tâche 3 s'exécute également immédiatement, et la Tâche 2 s'exécute après 2 secondes. Le comportement asynchrone permet au programme de continuer sans attendre que la Tâche 2 soit terminée.

Exemples concrets d'opérations asynchrones

Récupération de Données depuis une API

Une des opérations asynchrones les plus courantes en JavaScript est la récupération de données depuis un serveur distant en utilisant des APIs. JavaScript demande des données à une API, mais le reste du code continue de s'exécuter au lieu d'attendre la réponse du serveur. Une fois que les données sont disponibles, elles sont traitées en utilisant un callback ou une promesse.

index.html

index.js

Code Synchrone : Le paragraphe avec id="syncMessage" démontre que le code synchrone s'exécute immédiatement après le démarrage de la récupération asynchrone. Il montre que le programme ne se met pas en pause en attendant les données de l'API;
Récupération Asynchrone : Une fois que les données sont récupérées, le paragraphe avec id="apiOutput" est mis à jour, démontrant l'achèvement de la tâche asynchrone.

Minuteries (setTimeout et setInterval)

Les setTimeout() et setInterval() de JavaScript sont couramment utilisés pour planifier l'exécution de tâches après un délai ou à intervalles réguliers. Ces fonctions ne bloquent pas l'exécution d'autres codes. Les tâches qu'elles déclenchent se produisent après un délai ou un intervalle spécifié tandis que le reste du code continue de s'exécuter.

index.html

index.js

Code Synchrone : Le paragraphe avec id="syncMessage" se met à jour immédiatement, montrant que la partie synchrone du code s'exécute sans attendre la minuterie ;
Minuterie Asynchrone : Après 3 secondes, le rappel setTimeout() se termine et met à jour le paragraphe id="timerOutput" pour montrer que la minuterie est terminée.

Gestion des événements d'entrée utilisateur

JavaScript attend de manière asynchrone que des événements se produisent sans bloquer d'autres codes lors du traitement des interactions utilisateur (telles que les clics, les soumissions de formulaires ou les pressions de touches). Les écouteurs d'événements sont non bloquants, ce qui signifie que le reste du programme peut continuer à s'exécuter en attendant l'entrée de l'utilisateur.

index.html

index.js

Code Synchrone : Le paragraphe avec id="syncMessage" montre que le code synchrone s'exécute immédiatement après la configuration de l'écouteur d'événements. Il n'attend pas que l'utilisateur clique sur le bouton ;
Gestion Asynchrone des Événements : L'écouteur d'événements du bouton est déclenché lorsque l'utilisateur clique, mettant à jour le paragraphe id="eventOutput".

Tout était clair ?

Merci pour vos commentaires !

Section 4. Chapitre 1