Dans de nombreuses applications réelles, il peut être nécessaire d'exécuter plusieurs tâches asynchrones simultanément ou de déterminer laquelle se termine en premier. JavaScript propose deux méthodes principales pour gérer ces situations : Promise.all() et Promise.race().

Promise.all() : Exécution de tâches en parallèle

Promise.all() permet d'exécuter plusieurs promesses en parallèle. Elle retourne une seule promesse qui est résolue lorsque toutes les promesses du tableau sont résolues, ou qui est rejetée dès qu'une promesse est rejetée. Cette méthode est utile lorsque toutes les opérations asynchrones doivent être terminées avec succès avant de poursuivre.

La fonction fetchMultipleResources envoie trois requêtes simultanément pour récupérer les données d’un article, d’un utilisateur et de commentaires. Avec Promise.all(), les trois requêtes sont lancées en même temps, et la fonction attend que toutes les promesses soient résolues. Une fois résolues, les résultats sont déstructurés dans des variables distinctes (post, user et comments). Le titre de l’article, le nom de l’utilisateur et le nombre total de commentaires sont ensuite affichés dans le HTML. Cette méthode est efficace lorsque toutes les requêtes doivent être terminées avant de poursuivre, car elle réduit le temps d’attente global en exécutant les tâches en parallèle.

Promise.race() : Gestion de la première promesse résolue

Promise.race() retourne une seule promesse qui se résout ou se rejette dès que la première promesse du tableau est réglée (résolue ou rejetée). Cette méthode est utile lorsque seul le résultat le plus rapide vous intéresse, par exemple pour interrompre une requête si elle prend trop de temps.

La fonction fetchWithTimeout crée une timeoutPromise qui est rejetée après 3 secondes, simulant ainsi un délai d'attente dépassé. Simultanément, une fetchPromise demande des données à une API. Avec Promise.race(), la fonction attend la première promesse qui se termine. Si la récupération s'effectue en moins de 3 secondes, le titre de l'article est affiché. Sinon, si la récupération prend trop de temps, le délai d'attente est déclenché et un message d'erreur (« Request timed out! ») s'affiche dans le HTML. Cette approche est idéale pour gérer les situations où une réponse rapide est essentielle.

Cas d'utilisation pour l'exécution de requêtes en parallèle vs. séquentielle

Quand utiliser les requêtes parallèles (Promise.all())

Les requêtes parallèles sont idéales pour récupérer des données provenant de plusieurs sources indépendantes, car elles permettent à toutes les requêtes de s'exécuter simultanément. Par exemple, lors du chargement des données utilisateur, des articles et des commentaires pour un tableau de bord, chaque requête est distincte et ne dépend pas des autres, elles peuvent donc être récupérées en parallèle pour améliorer les performances. Cette approche minimise le temps d'attente total, car les requêtes sont traitées de manière concurrente plutôt que l'une après l'autre.

Quand utiliser les requêtes séquentielles

Dans certains cas, les tâches doivent être effectuées dans un ordre spécifique, c'est-à-dire qu'une tâche doit se terminer avant que la suivante ne commence. Pour ces requêtes dépendantes, il est possible d'utiliser async/await dans une boucle ou de chaîner les appels .then(), en évitant Promise.all().

Un exemple serait de récupérer d'abord les données utilisateur puis, en utilisant l'identifiant utilisateur obtenu, de récupérer les articles de cet utilisateur. Dans ce type de scénario, chaque requête dépend du résultat de la précédente, ce qui nécessite une approche séquentielle.

Cet exemple illustre la réalisation de requêtes séquentielles où chaque requête dépend du résultat de la précédente. Dans fetchUserDataSequentially, la fonction récupère d'abord les données utilisateur depuis l'API. Une fois les données utilisateur reçues et analysées, l'identifiant de l'utilisateur est utilisé dans une seconde requête pour obtenir les publications de cet utilisateur. Les résultats sont ensuite affichés dans le HTML, montrant le nom de l'utilisateur et le nombre de publications. Cette approche séquentielle est nécessaire lorsque les requêtes sont interdépendantes, garantissant que chaque requête se termine avant d'initier la suivante.