Écrivez du JavaScript pour le web

Voyons ensemble comment faire nos 2 requêtes en parallèle, suivies d'une requête en séquence avec les callbacks. Et vous verrez, ça peut vite devenir complexe !

Pour cet exemple, nous partons du principe que nous avons accès à 2 fonctions (  get  et  post  ) qui font respectivement une requête  GET  et une requête  POST  quand on leur passe en paramètre l'URL de la requête, et une callback à exécuter quand on a le résultat (avec une variable d'erreur en premier paramètre).

var GETRequestCount = 0;
var GETRequestResults = [];

function onGETRequestDone(err, result) {
    if (err) throw err;
    
    GETRequestCount++;
    GETRequestResults.push(result);
    
    if (GETRequestCount == 2) {
        post(url3, function(err, result) {
            if (err) throw err;
            
            // We are done here !
        });
    }
}

get(url1, onGETRequestDone);
get(url2, onGETRequestDone);

Comme vous pouvez le voir, le code est assez particulier à lire. Il y a d'autres façons d'écrire ce code, mais ça reste une des façons les plus simples et rapides à écrire.

Afin d'exécuter 2 requêtes  GET  en même temps, nous pouvons appeler 2 fois la fonction  get(). Étant donné que cette fonction est asynchrone, elle ne bloquera pas l'exécution du code. Ainsi l'autre fonction  get()  sera aussi appelée alors que la première ne sera pas encore terminée. C'est comme ça qu'on peut avoir 2 requêtes en parallèle.

Par contre, nous voulons exécuter une requête  POST  une fois que les 2 requêtes  GET  sont terminées, et pas avant ! Pour ce faire, nous devons savoir si les requêtes  GET  sont terminées. C'est pour ça que la variable  GETRequestCount  est créée. On va l'incrémenter dans la fonction callback que l'on a envoyée aux appels à  get() , et si on atteint 2 (le nombre de requêtes  GET qu'on a faites), alors on va exécuter la requête  POST .

GETRequestResults  sert à conserver les réponses des requêtes  GET , car on ne les a pas toutes les 2 en même temps.

Grâce à la fonction   Promise.all  , voyons comment exécuter nos requêtes en parallèle et en séquence avec les  Promises .

Pour cet exemple, nous partons du principe que nous avons accès à 2 fonctions (  get  et  post  ) qui font respectivement une requête  GET  et une requête  POST  quand on leur passe en paramètre l'URL de la requête. Ces fonctions retourneront une  Promise  avec le résultat de la requête.

Promise.all([get(url1), get(url2)])
    .then(function(results) {
        return Promise.all([results, post(url3)]];
    })
    .then(function(allResults) {
        // We are done here !
    });

Ici, nous utilisons la fonction  Promise.all  qui prend en paramètre une liste de  Promise  (cela peut aussi être de simples valeurs qui sont alors transformées en  Promise  résolues), et qui permet de toutes les exécuter en parallèle et de retourner une nouvelle  Promise  qui sera résolue quand toutes les  Promise  seront résolues.

Ainsi, la fonction  then()  recevra les résultats de toutes les  Promise  sous forme d'un tableau.

Afin d'exécuter notre requête  POST  une fois que les requêtes  GET  sont terminées, nous l'exécutons donc dans la fonction  then().

Notez que dans la fonction  then(), nous faisons encore une fois appel à la fonction  Promise.all  en lui passant les résultats des requêtes  GET  et notre requête  POST . Étant donné que  Promise.all  considère les simples valeurs comme des  Promise  résolues, cela nous permet, dans le prochain  then() , de récupérer une liste qui contient les résultats des requêtes  GET  et le résultat de la requête  POST  : allResults = [ [ getResult1, getResult2 ], postResult ] . 

Finalement, voyons comment exécuter le même code mais avec  async  /  await .

Pour cet exemple, nous partons du principe que nous avons accès à 2 fonctions (  get  et  post  ) qui font respectivement une requête  GET  et une requête  POST  quand on leur passe en paramètre l'URL de la requête. Ces fonctions sont asynchrones (avec le mot clé  async ).

async function requests() {
    var getResults = await Promise.all([get(url1), get(url2)]);
    var postResult = await post(url3);
    return [getResults, postResult];
}

requests().then(function(allResults) {
    // We are done here !
});

Nous utilisons aussi la fonction  Promise.all  dans ce code, car c'est comme ça que l'on peut exécuter des fonctions asynchrones en parallèle (rappelez-vous que  async  correspond en arrière-plan à une  Promise ).

Par contre, ici, nous utilisons  await  devant  Promise.all  afin d'attendre la fin de l'exécution des 2 requêtes  GET , puis nous utilisons  await  devant la requête  POST  afin d'attendre son résultat. Puis nous renvoyons un tableau avec tous les résultats.

Lorsque nous appelons la fonction  requests() , ici, nous utilisons  then()  pour récupérer tous les résultats (mais vous auriez aussi pu utiliser  await  au sein d'une autre fonction avec le mot clé  async ).

Dans ce chapitre, vous avez appris :

• À enchaîner des requêtes avec la méthode des callbacks ;

• À enchaîner des requêtes avec la méthode des  Promises

• À enchaîner des requêtes avec la méthode  async  /  await

Vous connaissez maintenant 3 techniques pour exécuter du code asynchrone et vous savez les mettre en situation. À vous maintenant de vous faire votre propre avis sur celle que vous préférez utiliser.  😀

Il est temps maintenant de passer à la prochaine partie où nous verrons comment coder en JavaScript dans un environnement plus efficace.  😎