≡

Comparaison Promise.all, Promise.any, Promise.race

#1 Principes communs à Promise.all, Promise.any et Promise.race

Ces méthodes travaillent avec des requêtes asynchrones qui retournent une promesse. Ces méthodes vont servir à gérer plusieurs requêtes asynchrones. Donc logiquement, elles prennent en entrée les promesses retournées par ces requêtes asynchrones.

Ensuite, chacune de ces méthodes, en fonction d'un critère qui lui est propre, va retourner un ou plusieurs résultats d'une requête ou bien une ou plusieurs raisons de l'échec d'une requête.

C'est un critère qui porte sur l'état des promesses qui sont fournies à l'entrée de la méthode. Par exemple, si toutes les promesses sont tenues, je retourne un tableau de résultats ou bien si une promesse est rompue, je retourne la raison de l'échec.

Principe de fonctionnement de ces trois méthodes.

#2 A quoi sert Promise.all ?

Promise.all renvoie une promesse tenue si toutes les promesses passées en argument sont tenues. La valeur de la promesse retournée est un tableau qui contient tous les résultats de chacune des promesses qui ont été tenues.
Si une ou plusieurs promesses sont rompues, alors Promise.all renvoie la première promesse rompue. La valeur retournée est la raison de l'échec de la promesse rompue.

Dans l'exemple ci-dessous, vous avez la déclaration de deux fonctions p_tenue(num) et p_rompue(num). Ces deux fonctions retournent respectivement une promesse tenue et une promesse rompue.

Le paramètre num a un double rôle :

num fait partie de la valeur retournée par la promesse, qu'elle soit tenue ou rompue. num est concaténé soit à la chaîne de caractères 'Succès => ' soit à la chaîne de caractères 'Echec => '.
num sert également à fabriquer un temps d'attente sur le setTimeout. num est multiplié par 1000 pour fournir un délai en millisecondes. Pour retourner une promesse tenue, j'appelle resolve dans l'exécuteur. Pour retourner une promesse rompue, j'appelle reject dans l'exécuteur. Si ce que je viens de dire vous gêne, alors revoyez le tutoriel sur les promesses.

Ensuite, je fais le test A, je passe à Promise.all que des promesses qui seront tenues. Dans ce cas, je vérifie que Promise.all va me renvoyer une promesse tenue qui a pour valeur un tableau contenant les résultats de toutes les promesses tenues.

Puis je fais le test B dans lequel je passe à Promise.all deux promesses rompues. Dans ce cas, il va me renvoyer celle qui est rompue en premier (le plus vite).

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
	<script>
		// Cette fonction renvoie systématiquement une promesse tenue au bout de num secondes
		function p_tenue(num) {
			return new Promise(
				(resolve,reject) => {
					setTimeout(
						() => { resolve("Succès => "+num) },num*1000
					)
				}
			)
		}
		// Cette fonction renvoie systématiquement une promesse rompue au bout de num secondes
		function p_rompue(num) {
			return new Promise(
				(resolve,reject) => {
					setTimeout(
						() => { reject("Echec => "+num) },num*1000
					)
				}
			)
		}
		console.log('Début');
		// TEST A) Renvoie une promesse tenue lorsque toutes sont tenues
		Promise.all([p_tenue(1),p_tenue(1),p_tenue(5)])
		.then(
			rep => { console.log('THEN_A => ',rep)}
		).catch(
			erreur => { console.log('CATCH_A => ',erreur)}
		)
		// TEST B) Renvoie une promesse rompue si une est rompue.
		Promise.all([p_tenue(1),p_rompue(2),p_rompue(3)])
		.then(
			rep => { console.log('THEN_B => ',rep)}
		).catch(
			erreur => { console.log('CATCH_B => ',erreur)}
		)
		console.log('Fin');
	</script>
</body>
</html>

Si on regarde cette exécution, ce qu'il faut remarquer c'est que Promise.all est asynchrone. Les chaînes Début et Fin s'affichent immédiatement, car les appels à Promise.all ne sont pas bloquants. Vous pouvez remarquer aussi que c'est le résultat du test B (CATCH_B) qui s'affiche en premier, car il est plus rapide que le test A (THEN_A).

Tester le code

#3 A quoi sert Promise.any ?

Promise.any renvoie une promesse tenue dès que l'une des promesses passées en argument est tenue. La valeur de la promesse retournée est le résultat de la promesse tenue.

Promise.any renvoie une promesse rompue si toutes les promesses passées en argument sont rompues. Dans ce cas, la valeur de la promesse est un tableau qui contient toutes les raisons des échecs de chacune des promesses passées en argument. Ce tableau est rendu sous la forme d'un objet de constructeur AggregateError.

Ci-dessous, on retrouve les deux fonctions utilisées dans l'exemple précédant pour produire des promesses tenues ou rompues.

Dans le test A, je passe une promesse qui sera rompue et deux promesses qui seront tenues. Promise.any va me retourner le résultat de la première promesse tenue.

Dans le test B, je ne passe que des promesses qui seront rompues. Dans ce cas, Promise.any va me retourner un tableau d'erreurs.

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
	<script>
		// Cette fonction renvoie systématiquement une promesse tenue au bout de num secondes
		function p_tenue(num) {
			return new Promise(
				(resolve,reject) => {
					setTimeout(
						() => { resolve("Succès => "+num) },num*1000
					)
				}
			)
		}
		// Cette fonction renvoie systématiquement une promesse rompue au bout de num secondes
		function p_rompue(num) {
			return new Promise(
				(resolve,reject) => {
					setTimeout(
						() => { reject("Echec => "+num) },num*1000
					)
				}
			)
		}
		// TEST A) Renvoie la première promesse tenue
		Promise.any([p_rompue(1),p_tenue(3),p_tenue(5)])
		.then(
			rep => { console.log('THEN_A => ',rep)}
		).catch(
			err => { console.log('CATCH_A => ',err.errors)}
		)
		// TEST B) Renvoie toutes les promesses rompues
		Promise.any([p_rompue(1),p_rompue(3),p_rompue(5)])
		.then(
			rep => { console.log('THEN_B => ',rep)}
		).catch(
			err => { console.log('CATCH_B => ',err.errors)}
		)
	</script>
</body>
</html>

Tester le code

#4 A quoi sert Promise.race ?

Promise.race retourne le résultat de la première promesse tenue ou la raison de l'échec de la première promesse rompue.

Dans l'exemple ci-dessous. Dans le test A, c'est la promesse tenue au bout d'une seconde qui sera retournée par Promise.race. Dans le test B, c'est la promesse rompue au bout de 3 secondes qui sera retournée.

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
	<script>
		// Cette fonction renvoie systématiquement une promesse tenue au bout de num secondes
		function p_tenue(num) {
			return new Promise(
				(resolve,reject) => {
					setTimeout(
						() => { resolve("Succès => "+num) },num*1000
					)
				}
			)
		}
		// Cette fonction renvoie systématiquement une promesse rompue au bout de num secondes
		function p_rompue(num) {
			return new Promise(
				(resolve,reject) => {
					setTimeout(
						() => { reject("Echec => "+num) },num*1000
					)
				}
			)
		}
		// TEST A) Renvoie la première promesse tenue
		Promise.race([p_tenue(5),p_tenue(1),p_rompue(5)])
		.then(
			rep => { console.log('THEN_A => ',rep)}
		).catch(
			err => { console.log('CATCH_A => ',err)}
		)
		// TEST B) Renvoie la première promesse rompue
		Promise.race([p_rompue(5),p_rompue(3),p_tenue(5)])
		.then(
			rep => { console.log('THEN_B => ',rep)}
		).catch(
			err => { console.log('CATCH_B => ',err) }
		)
	</script>
</body>
</html>

Tester le code