Dans de nombreuses applications du monde réel, vous pouvez avoir besoin d'exécuter plusieurs tâches asynchrones simultanément ou de décider laquelle se termine en premier. JavaScript fournit deux méthodes clés pour gérer ces scénarios : Promise.all() et Promise.race().

Promise.all() : Exécution des Tâches en Parallèle

Promise.all() vous permet d'exécuter plusieurs promesses en parallèle. Elle retourne une seule promesse qui se résout lorsque toutes les promesses du tableau se résolvent, ou elle se rejette dès qu'une promesse est rejetée. Cela est utile lorsque vous avez besoin que toutes les opérations asynchrones soient terminées avec succès avant de continuer.

La fonction fetchMultipleResources envoie trois requêtes simultanément pour récupérer les données d'un post, d'un utilisateur et de commentaires. Avec Promise.all(), les trois requêtes sont initiées ensemble, et la fonction attend que toutes les promesses soient résolues. Une fois résolues, les résultats sont déstructurés en variables séparées (post, user, et comments). Le titre du post, le nom de l'utilisateur et le nombre total de commentaires sont ensuite affichés dans le HTML. Cette approche est efficace lorsque vous avez besoin que toutes les requêtes soient terminées avant de continuer, car elle réduit le temps d'attente global en exécutant les tâches simultanément.

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 (soit résolue, soit rejetée). Cela est utile lorsque vous êtes intéressé par le résultat le plus rapide, comme pour annuler une requête si elle prend trop de temps.

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

Cas d'utilisation pour exécuter des requêtes en parallèle vs séquentiellement

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

Les requêtes parallèles sont idéales pour récupérer des données 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 publications 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 simultanément plutôt que l'une après l'autre.

Quand utiliser les requêtes séquentielles

Dans certains cas, les tâches doivent être complétées dans un ordre spécifique, ce qui signifie que l'une doit se terminer avant que la suivante puisse commencer. Pour ces requêtes dépendantes, vous pouvez utiliser async/await dans une boucle ou chaîner les appels .then(), en évitant Promise.all().

Un exemple serait de d'abord récupérer les données utilisateur puis, en utilisant l'ID utilisateur récupéré, récupérer les publications de l'utilisateur. Dans de tels scénarios, chaque requête dépend des résultats de la précédente, nécessitant une approche séquentielle.

Cet exemple démontre comment effectuer des 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 de l'API. Une fois les données utilisateur reçues et analysées, l'ID de l'utilisateur est utilisé dans une deuxième requête pour récupérer les publications de l'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 est terminée avant d'initier la suivante.