Dans ce chapitre, nous allons voir comment enchaîner les requêtes HTTP en exécutant 2 requêtes GET en même temps (en parallèle), puis 1 requête POST une fois que les 2 requêtes précédentes sont terminées (en séquence). Pour cela, nous allons avoir besoin des techniques asynchrones vues au chapitre précédent.
Enchaînez des requêtes avec les callbacks
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
etpost
). Elles font respectivement une requêteGET
et une requêtePOST
et elles prennent en paramètre :
l'URL de la requête,
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
.
Enchaînez des requêtes avec les Promise
Grâce à la fonction Promise.all
, voyons comment exécuter nos requêtes en parallèle et en séquence avec les Promise
.
Pour cet exemple, nous partons du principe que nous avons accès à 2 fonctions (
get
etpost
) qui font respectivement une requêteGET
et une requêtePOST
quand on leur passe en paramètre l'URL de la requête. Ces fonctions retourneront unePromise
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()
.
Enchaînez des requêtes avec async/await
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
etpost
) qui font respectivement une requêteGET
et une requêtePOST
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
).
En résumé
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
Promise
;À 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. 😎