Apprendre Introduction à JavaScript Asynchrone | JavaScript Asynchrone et Intégration d’API

Qu'est-ce que la programmation asynchrone ?

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

Cela est essentiel en développement web, où il peut être nécessaire d'effectuer des tâches longues, telles que la récupération de données depuis une API, l'attente d'une saisie utilisateur ou la gestion de minuteries.

Imaginons 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'à leur achèvement. Par exemple, si un utilisateur publie un commentaire (1) puis tente d'ouvrir une barre latérale (3), l'interface se fige jusqu'à ce que le commentaire soit traité, ce qui entraîne des délais.

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

Différences entre le comportement synchrone et asynchrone

Programmation synchrone

En programmation synchrone, les tâches sont exécutées l'une après l'autre. Chaque tâche doit se terminer 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 longue (la boucle). Cela bloque l'exécution du code et peut figer le navigateur.

Programmation asynchrone

En programmation asynchrone, les tâches peuvent être lancées puis exécutées ultérieurement sans bloquer les autres instructions. Cela permet à d'autres tâches de continuer pendant l'attente de l'achèvement d'opérations longues (par exemple, la récupération de données). Ce mécanisme garantit que des tâches telles que les requêtes réseau ou les minuteries n'interrompent pas le déroulement des 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 la fin de la Tâche 2.

Exemples concrets d'opérations asynchrones

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

L'une des opérations asynchrones les plus courantes en JavaScript consiste à récupérer des données depuis un serveur distant à l'aide d'API. 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 les données disponibles, elles sont traitées à l'aide d'un callback ou d'une promesse.

index.html

index.js

Code synchrone : Le paragraphe avec id="syncMessage" illustre 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 s'interrompt pas en attendant les données de l'API ;
Récupération asynchrone : Une fois les données récupérées, le paragraphe avec id="apiOutput" est mis à jour, démontrant l'achèvement de la tâche asynchrone.

Minuteurs (setTimeout et setInterval)

Les fonctions setTimeout() et setInterval() de JavaScript sont couramment utilisées 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 des autres codes. Les tâches qu'elles déclenchent s'exécutent 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 le minuteur ;
Minuteur asynchrone : Après 3 secondes, le rappel de setTimeout() s'exécute et met à jour le paragraphe id="timerOutput" pour indiquer que le minuteur est terminé.

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

JavaScript attend de manière asynchrone que des événements se produisent sans bloquer l'exécution d'autres codes lors de la gestion des interactions utilisateur (telles que les clics, les soumissions de formulaires ou les frappes clavier). Les écouteurs d'événements sont non bloquants, ce qui signifie que le reste du programme peut continuer à s'exécuter pendant l'attente d'une entrée 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 mise en place de l'écouteur d'événement. Il n'attend pas que l'utilisateur clique sur le bouton ;
Gestion asynchrone des événements : L'écouteur d'événement 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

Demandez à l'IA

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Awesome!

Completion rate improved to 2.22

Glissez pour afficher le menu

Qu'est-ce que la programmation asynchrone ?

Imaginons 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.

Différences entre le comportement synchrone et asynchrone

Programmation synchrone


              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 longue (la boucle). Cela bloque l'exécution du code et peut figer le navigateur.

Programmation asynchrone

index.html

index.css

index.js

Exemples concrets d'opérations asynchrones

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

index.html

index.js

Code synchrone : Le paragraphe avec id="syncMessage" illustre 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 s'interrompt pas en attendant les données de l'API ;
Récupération asynchrone : Une fois les données récupérées, le paragraphe avec id="apiOutput" est mis à jour, démontrant l'achèvement de la tâche asynchrone.

Minuteurs (setTimeout et setInterval)

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 le minuteur ;
Minuteur asynchrone : Après 3 secondes, le rappel de setTimeout() s'exécute et met à jour le paragraphe id="timerOutput" pour indiquer que le minuteur est terminé.

Gestion des événements d'entrée 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 mise en place de l'écouteur d'événement. Il n'attend pas que l'utilisateur clique sur le bouton ;
Gestion asynchrone des événements : L'écouteur d'événement 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