ASYNC / AWAIT

Le mot réservé wait se place devant une requête asynchrone qui retourne une promesse. await permet d'attendre la résolution de la promesse. Si vous regardez l'exemple ci-dessous, les instructions await requeteAsynchrone() vont être bloquées en attente du résultat comme si on faisait des requêtes synchrones. Attention, c'est bloquant, mais c'est bloquant à l'intérieur d'une fonction qui elle est asynchrone, car, elle est déclarée avec le async function.

Ca c'est très important, car c'est ce qui évite que votre application soit bloquée.

En plus, await permet de récupérer directement le résultat de la requête au moyen d'une simple affectation 😎. Donc, vous n'avez plus besoin d'utiliser de then et de coder un callback à l'intérieur de manière à récupérer le résultat.

Dans la doc MDN on vous dit que await doit être utilisé à l'intérieur d'une fonction qui a été déclarée avec le mot réservé async placé devant le mot réservé function. C'est pour les raisons que je viens de vous expliquer.

Maintenant, concernant la déclaration avec async. On va prendre une console JavaScript et on va déclarer la fonction listeDeRequete avec async devant. On va remarquer les choses suivantes :

1. Le constructeur n'est pas le même que celui des fonctions classiques. C'est le constructeur AsyncFunction.
2. Justement ce constructeur est dérivé de celui des fonctions classiques.
3. Cependant, un typeof ne fait pas la différence et renvoie toujours la chaîne 'function'.
4. Cette fonction renvoie une promesse. Ca ne suffit pas pour en faire une fonction asynchrone ! Mais si on consulte la doc MDN, on voit qu'en ayant mis async devant et bien le moteur JavaScript nous a alloué une fonction qui va avoir le comportement d'une fonction asynchrone.

On va faire un exemple dans lequel async / await vont nous aider à enchaîner des requêtes asynchrones dans des conditions particulières. Ces conditions, ce sont celles dont on a parlé dans le tuto sur les promesses. On est toujours dans la même problématique, à savoir que souvent dans une requête asynchrone, on a besoin d'en faire une deuxième et pour faire cette deuxième, on a besoin d'attendre le résultat de la première. Et ainsi de suite, la troisième peut avoir besoin d'attendre le résultat de la deuxième.

On avait vu que sans les promesses, on tombait dans l'enfer des callbacks avec un code très peu lisible.

On avait vu que par contre, avec les promesses, on pouvait chaîner les opérations asynchrones dans des then. Des then que l'on avait écrit les uns sous les autres de manière à avoir un code lisible.

Ci-dessous je vais repartir du début et je vais prendre un exemple où je vais me servir des promesses pour enchaîner des opérations asynchrones. Ensuite on regardera comment avec async / await on peut encore apporter de la lisibilité à ces séquences de codes.

Dans le code ci-dessous, qu'est-ce qu'il y a ?

1. Je commence par programmer la fonction requeteAsynchrone. C'est une fonction qui simule une opération asynchrone. C'est une opération que j'ai promessifié puisque c'est moi qui fais le return d'un objet de constructeur Promise, c'est moi qui écris l'exécuteur et enfin, c'est moi qui déclenche l'appel à resolve. Je le fais, après un délai que je provoque en utilisant setTimeout. L'argument num, on peut le voir comme le numéro de la requête. Et enfin le délai est calculé par rapport à num multiplier par 1000 de manière à avoir un délai en millisecondes.
2. Ensuite, je code ma fonction listeDeRequete(). Dans cette fonction, je vais faire ma séquence d'entrée / sortie asynchrone. Là, je commence par lancer l'opération asynchrone numéro une. Pour ça j'appelle requeteAsynchrone(1) et je traite le résultat dans le then qui est collé derrière. Dans ce then, je vais enchaîner une deuxième opération asynchrone en appelant requeteAsynchrone(res_1+1) après avoir obtenu le résultat de requeteAsynchrone(1). Je me sers de ce résultat pour simulation. Le résultat res_1+1 vaudra 2.
3. Ensuite, je continue de la même manière avec les opérations qui suivent.
4. J'obtiens un code que l'on avait qualifié de lisible lorsque l'on avait fait les promesses et on s'en était félicité.

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> </head> <body> <script> // Fonction asynchrone promessifiée // num c'est le numéro de la requête function requeteAsynchrone(num) { return new Promise((resolve, reject) => { setTimeout(() => resolve(num), num * 1000 ); }) } // J'ai besoin d'attendre le résultat de la requête 1 // pour lancer la requête 2 et ainsi de suite. function listeDeRequete () { requeteAsynchrone(1).then( res_1 => { console.log(`résultat numéro ${res_1}`); return requeteAsynchrone(res_1+1); } ) .then( res_2 => { console.log(`résultat numéro ${res_2}`); return requeteAsynchrone(res_2+1); } ) .then( res_3 => { console.log(`résultat numéro ${res_3}`); } ) .catch( err => console.log(err) ) } console.log('Début'); listeDeRequete(); console.log('Fin'); </script> </body> </html> Tester le code

Ci-dessous, je constate que la fonction listeDeRequete() est asynchrone en ce sens qu'elle ne contient que des opérations asynchrones. On peut vérifier que le console.log("Fin") s'exécute avant les requêtes de la fonction.

Ci-dessous, je fais un console.log('Bonjour') manuellement pour vérifier que mon application n'est pas bloquée.

Maintenant, il s'agit d'utiliser async / await de manière à améliorer encore ce code.

J'utilise des structures syntaxiques await requeteAsynchrone(1), grosso modo à la place des then. Je place le async dans la déclaration de listeDeRequête. Par contre, il ne faut pas oublier de mettre un try catch pour récupérer deux choses en fait :

• Récupérer les promesses rompues qui pourraient être retournées par les appels à requeteAsynchrone().
• Récupérer les éventuelles exceptions qui pourraient être déclenchées par des appels à une fonction équivalente à requeteAsynchrone().

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> </head> <body> <script> function requeteAsynchrone(num) { return new Promise((resolve, reject) => { setTimeout(() => resolve(num), num * 1000 ); }) } async function listeDeRequete() { try { const res_1 = await requeteAsynchrone(1); console.log(`résultat numéro ${res_1}`); const res_2 = await requeteAsynchrone(res_1+1); console.log(`résultat numéro ${res_2}`); const res_3 = await requeteAsynchrone(res_2+1); console.log(`résultat numéro ${res_3}`); } catch (error) { console.log(error); } } console.log('Début'); listeDeRequete(); console.log('Fin'); </script> </body> </html> Tester le code

Maintenant, je fais les mêmes vérifications que précédemment. Ci-dessous, je vérifie que la fonction listeDeRequete() a toujours un comportement asynchrone.

Ci-dessous, je vérifie que mon application n'est pas bloquée en faisant manuellement un console.log de 'Bonjour' directement dans la console JavaScript.

Je constate que le console.log s'intercale entre les requêtes bloquantes de la fonction asynchrone. 😏

On peut conclure en disant que async / await permet d'écrire un code plus lisible et surtout moins verbeux.