Programmation asynchrone en JavaScript

Le concept d'asynchronicité

L'asynchrone (async) est le concept opposé du synchrone (sync).

Dans la programmation monothread traditionnelle que nous apprenons, l'exécution d'un programme est synchrone (synchrone ne signifie pas que toutes les étapes s'exécutent simultanément, mais plutôt que les étapes s'exécutent séquentiellement dans une séquence de flux de contrôle). Le concept d'asynchronicité, cependant, ne garantit pas la synchronisation, ce qui signifie que l'exécution d'un processus asynchrone n'a plus de relation séquentielle avec la séquence d'origine.

En termes simples : l'exécution synchrone suit l'ordre de votre code, l'exécution asynchrone ne suit pas l'ordre du code, et l'exécution asynchrone est plus efficace.

Ce qui précède est une explication du concept d'asynchronisme. Ensuite, expliquons l'asynchronisme en termes simples : l'asynchronisme consiste à lancer un thread enfant à partir du thread principal pour accomplir une tâche.

Quand utiliser la programmation asynchrone

En programmation front-end (et parfois aussi back-end), lors du traitement d'opérations courtes et rapides, comme le calcul du résultat de 1 + 1, cela peut souvent être effectué dans le thread principal. En tant que thread, le thread principal ne peut pas accepter plusieurs requêtes en même temps. Par conséquent, lorsqu'un événement n'est pas terminé, l'interface ne peut pas traiter d'autres requêtes.

Considérons maintenant un bouton. Si nous définissons son événement onclick sur une boucle infinie, alors lorsque le bouton est pressé, toute la page web ne répondra plus.

Pour éviter cette situation, nous utilisons souvent des threads enfants pour gérer des tâches susceptibles de prendre assez de temps pour être remarquées par l'utilisateur, comme lire un gros fichier ou effectuer une requête réseau. Comme un thread enfant est indépendant du thread principal, même si un blocage se produit, cela n'affectera pas le fonctionnement du thread principal. Cependant, les threads enfants ont une limitation : une fois lancés, ils perdent la synchronisation avec le thread principal, et nous ne pouvons pas déterminer quand ils se terminent. S'il y a des choses à traiter après leur fin, comme traiter des informations provenant d'un serveur, nous ne pouvons pas les fusionner de nouveau dans le thread principal.

Pour résoudre ce problème, les fonctions d'opération asynchrone en JavaScript utilisent souvent des fonctions de rappel pour gérer les résultats des tâches asynchrones.

Fonctions de rappel

Une fonction de rappel est une fonction à laquelle nous indiquons, au démarrage d'une tâche asynchrone : ce qu'il faut faire après que vous avez terminé cette tâche. De cette façon, le thread principal n'a presque pas besoin de se soucier de l'état de la tâche asynchrone ; elle se gérera d'elle-même du début à la fin.

Exemples

function print() { document.getElementById("demo").innerHTML="EXEMPLE!"; } setTimeout(print, 3000);

Essayez-le »

Le setTimeout de ce programme est un processus qui prend beaucoup de temps (3 secondes). Son premier paramètre est une fonction de rappel, et le second paramètre est le nombre de millisecondes. Après l'exécution de cette fonction, il crée un thread enfant. Le thread enfant attend 3 secondes, puis exécute la fonction de rappel « print », qui affiche « EXAMPLE! » sur la ligne de commande.

Bien sûr, la syntaxe JavaScript est très conviviale. Nous n'avons pas besoin de définir une fonction print séparée ; nous écrivons souvent le programme ci-dessus comme suit :

Exemples

setTimeout(function () { document.getElementById("demo").innerHTML="EXAMPLE!"; }, 3000);

Essayez-le »

Remarque :Étant donné que setTimeout attend 3 secondes dans un thread enfant, le thread principal ne s'arrête pas après l'exécution de la fonction setTimeout, donc :

Exemples

setTimeout(function () { document.getElementById("demo1").innerHTML="EXAMPLE-1!"; //Le thread enfant s'exécute après trois secondes }, 3000); document.getElementById("demo2").innerHTML="EXAMPLE-2!"; //Le thread principal s'exécute en premier

Essayez-le »

Le résultat d'exécution de ce programme est :

EXAMPLE-1!    // 三秒后子线程执行
EXAMPLE-2!    // 主线程先执行

AJAX asynchrone

Outre la fonction setTimeout, les rappels asynchrones sont largement utilisés dans la programmation AJAX. Pour plus de détails sur AJAX, veuillez consulter :https://www.example.com/ajax/ajax-tutorial.html

XMLHttpRequest est souvent utilisé pour demander des données XML ou JSON à un serveur distant. Un objet XMLHttpRequest standard contient souvent plusieurs fonctions de rappel :

Exemples

var xhr = new XMLHttpRequest(); xhr.onload = function () { //Afficher les données textuelles reçues document.getElementById("demo").innerHTML=xhr.responseText; } xhr.onerror = function () { document.getElementById("demo").innerHTML="Erreur de requête"; } //Envoyer une requête GET asynchrone xhr.open("GET", "https://www.example.com/try/ajax/ajax_info.txt", true); xhr.send();

Essayez-le »

Les propriétés onload et onerror de XMLHttpRequest sont toutes deux des fonctions, appelées respectivement lorsque la requête réussit et échoue. Si vous utilisez la bibliothèque jQuery complète, vous pouvez utiliser AJAX asynchrone de manière plus élégante :

Exemples

$.get("https://www.example.com/try/ajax/demo_test.php",function(data,status){ alert("Data:" + data + "\nStatus:" + status); });

Essayez-le »
Autres extensions