• 12 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 4/1/20

Comprenez comment fonctionne l'asynchrone en JS

Log in or subscribe for free to enjoy all this course has to offer!

Saviez-vous que JavaScript est synchrone et n'a qu'un seul thread d'exécution ?

... qu'est-ce que tu nous racontes là ?

JavaScript est synchrone et mono-thread

Qu'est-ce que ça veut dire ?

Eh bien, tout simplement qu'il n'y a qu'un seul fil d'exécution du code source. Cela signifie que lorsque vous écrivez du code, chaque ligne sera exécutée l'une après l'autre en attendant la fin de l'exécution de la ligne précédente. Il n'y a pas d'autre code qui pourra être exécuté en parallèle. Il ne peut faire qu'une seule chose à la fois.

Mais dans le titre du chapitre tu parles de faire de l'asynchrone en JavaScript, et là tu nous dis que ce n'est plus possible ?

Eh bien, en fait il est possible et même très facile de faire de l'asynchrone en JavaScript, mais l'exécution restera synchrone...

🧐

Bon, essayons de clarifier tout ça maintenant...

Si du code synchrone est du code qui s'exécute ligne après ligne en attendant la fin de l'exécution de la ligne précédente, alors on peut facilement en déduire que du code asynchrone va s'exécuter ligne après ligne, mais la ligne suivante n'attendra pas que la ligne asynchrone ait fini son exécution. Prenons cet exemple :

let productId = 1;
let productPrice = getProductPriceAsync(productId);
doSomething(productPrice);

En admettant que la fonction  getProductPriceAsync()   soit asynchrone, alors la ligne suivante sera exécutée avant la fin de l'exécution de la fonction asynchrone, mais il ne sera pas encore possible d'utiliser la valeur de  productPrice  (nous verrons dans le chapitre suivant comment nous pouvons nous en servir).

Mais comment peut-on faire ça avec un langage synchrone ?

Avec ce qu'on appelle l'event loop !

L'event loop

En JavaScript, chaque ligne de code est exécutée de façon synchrone, mais il est possible de demander à exécuter du code de manière asynchrone. Et lorsque l'on demande à exécuter une fonction de façon asynchrone, la fonction en question est placée dans une sorte de file d'attente qui va exécuter toutes les fonctions qu'elle contient les unes après les autres. C'est ce qu'on appelle l'event loop. Tout le cœur du langage fonctionne autour de ça.

Ainsi, le code n'est pas réellement exécuté en parallèle car il est mis en file d'attente, mais il ne bloque pas l'exécution du code depuis lequel il a été appelé.

Event Loop en JavaScript
Event Loop

Jouez avec l'event loop

Maintenant que vous comprenez un peu mieux ce qu'est l'event loop, voyons concrètement comment demander à exécuter du code de manière asynchrone.

La fonction setTimeout

setTimeout  est la fonction la plus répandue lorsque l'on veut exécuter du code asynchrone sans bloquer le fil d'exécution en cours. Cette fonction prend 2 paramètres :

  • La fonction à exécuter de manière asynchrone (qui sera donc ajoutée à la file d'attente de l'event loop) ;

  • Le délai, en millisecondes, avant d'exécuter cette fonction.

setTimeout(function() {
    console.log("I'm here!")
}, 5000);

console.log("Where are you?");

Dans l'exemple ci-dessus, le texte  Where are you?  s'affichera avant  I'm here! , qui ne sera affiché qu'au bout de 5 secondes.

La fonction  setTimeout  nous retourne une valeur permettant d'identifier le code asynchrone que l'on veut exécuter. Il est possible de passer cet identifiant en paramètre à la fonction  clearTimeout  si vous souhaitez annuler l'exécution asynchrone de la fonction avant qu'elle ne soit exécutée.

Pour en savoir plus sur la fonction setTimeout, vous trouverez la documentation ici.

Les autres méthodes

Il existe d'autres méthodes un peu moins répandues, voire très peu utilisées :

  • setInterval  (doc) : elle fonctionne exactement comme  setTimeout , à ceci près qu'elle exécute la fonction passée en paramètre en boucle à une fréquence déterminée par le temps en millisecondes passé en second paramètre. Il suffira de passer la valeur de retour de  setInterval  à  clearInterval  pour stopper l'exécution en boucle de la fonction ;

  • setImmediate  (doc). Cette fonction prend en seul paramètre la fonction à exécuter de façon synchrone.  La fonction en question sera placée dans la file d'attente de l'event loop, mais va passer devant toutes les autres fonctions, sauf certaines spécifiques au Javascript : les événements (les mêmes qu'on a vus au premier chapitre, et qui sont donc exécutés de façon asynchrone  😉), le rendu, et l'I/O. Il existe aussi  nextTick , qui permet, là, de court-circuiter tout le monde. À utiliser avec précaution, donc...

Le cas de l'I/O

L'I/O correspond aux événements liés à l'input(les flux d'entrée) et l'output(les flux de sortie). Cela correspond notamment à la lecture/écriture des fichiers, aux requêtes HTTP, etc.

Vous avez dû remarquer que lorsque l'on exécutait la fonction  send()  lors d'une requête HTTP, celle-ci ne bloquait pas l'exécution du code. On n'attend pas que la requête soit envoyée et une réponse reçue avant d'exécuter le reste du code. C'est donc une fonction asynchrone, et tout ce qui touche à l'I/O peut être exécuté de manière asynchrone. Et c'est tant mieux, car leur exécution peut prendre du temps 😎.

En résumé

Dans ce chapitre, vous avez appris :

  • Que le JavaScript est synchrone et mono-thread ;

  • Ce qu'est l'event loop ;

  • Comment utiliser la méthode  setTimeout

  • Qu'il existe d'autres méthodes asynchrones ;

  • Comment l'I/O est géré avec JavaScript.

Vous savez maintenant comment exécuter du code de manière asynchrone, mais on ne sait pas comment profiter du résultat de ce code depuis celui qui l'a exécuté.

Vous vous rappelez de notre exemple de code avec la fonction  getProductPriceAsync  ? Eh bien, avec ce que nous venons d'apprendre nous ne sommes pas en mesure de renvoyer le résultat de notre code dans la variable  productPrice .

Et c'est justement dans le prochain chapitre que nous allons voir ça !

Example of certificate of achievement
Example of certificate of achievement