Cartographie des promesses en JavaScript

Découvrez comment mapper les opérations asynchrones/d’attente selon trois approches différentes.

Avez-vous récemment rencontré un problème dans lequel vous vous attendiez à ce que le résultat de votre fonction map renvoie une valeur résolue/attendue, mais elle a renvoyé une liste de promesses. Par exemple:

const result = ids.map(async (id) => {
  return await fetch(id);
});

Vous n’êtes pas seul. Je l’ai vécu et vu à plusieurs reprises lors de programmation en binôme. Cet article de blog montrera comment mapper les opérations asynchrones/d’attente.

Prêt? Allons-y.

Le problème

Imaginez ceci : vous recevez un ensemble d’éléments nécessitant un traitement asynchrone. Peut-être que ces éléments représentent des identifiants et que vous devez récupérer des données pour chacun. Voici une erreur courante que font les gens :

const ids = [1, 2, 3, 4, 5];

const fetchData = async (id) => {
  
  return `data for ${id}`;
};

const processItems = async () => {
  const result = ids.map(async (id) => {
    return await fetchData(id);
  });

  console.log(result); 
};

processItems();

D’accord, alors qu’est-ce qui ne va pas ici ? 🤔Le map la fonction renvoie un tableau de promesses et n’attend pas qu’elles soient résolues. Ce n’est pas ce que nous voulons et cela peut conduire au chaos lorsque nous essayons d’utiliser le result plus tard.

La solution pour… de la boucle

Une approche consiste à utiliser le for...of boucle. Ceci est utile si vos opérations asynchrones doivent se dérouler dans l’ordre plutôt que de s’exécuter en parallèle.

const processItemsSequentially = async () => {
  const result = [];
  for (const id of ids) {
    const data = await fetchData(id);
    result.push(data);
  }

  console.log(result); 
};

processItemsSequentially();

Ceci est plus facile à lire et à comprendre si vous souhaitez une exécution séquentielle, mais soyez prudent : cette approche pourrait être plus lente car chaque opération attend la fin de la précédente.

La solution Promise.all

Nettoyons cela en utilisant Promise.all et Array.prototype.map(). Cette méthode astucieuse peut prendre notre éventail de promesses et renvoyer une seule promesse qui se résout lorsque toutes sont résolues.

const processItems = async () => {
  const result = await Promise.all(ids.map((id) => {
    return fetchData(id);
  }));

  console.log(result); 
};

processItems();

Boom! Maintenant, nous cuisinons au gaz. L’ensemble des promesses est enveloppé dans une seule promesse, qui se résout avec le résultat. Bien mieux, et fonctionne simultanément ! Cependant, il y a un problème. Exécuter des promesses simultanément (par exemple, avec 1 000 éléments) ne signifie pas toujours rapide. Cela peut devenir lent et entraîner des problèmes de mémoire.

Indice: Vous pouvez choisir d’utiliser promise.all() ou promise.allSettled() avec cet exemple.

La solution plus propre avec p-map

Enfin, examinons une meilleure façon de mapper simultanément tout en limitant le nombre de promesses devant s’exécuter simultanément. Pour cela, nous allons utiliser le p-carte de npm. Vous pouvez l’ajouter à votre projet en utilisant npm install p-map.

C’est différent de Promise.all() en ce sens que vous pouvez contrôler la limite de concurrence et décider d’arrêter ou non l’itération en cas d’erreur. Voici comment le processItems() la fonction que nous avons définie ressemblerait à :

import pMap from "p-map";
const ids = [1, 2, 3, 4, 5];

const fetchData = async (id: number) => {
  
  return `data for ${id}`;
};

const processItems = async () => {
  const result = await pMap(ids, 
    (id) => fetchData(id), { concurrency: 2 });

  console.log(result); 
};

processItems();

Bien que nous ayons utilisé ici une syntaxe différente, cette version est concise et efficace. En définissant une limite de concurrence, ce modèle évite de surcharger le système lorsqu’il y a beaucoup de données et nous pouvons contrôler si nous voulons arrêter ou continuer en cas d’erreur. Pour plus d’options avec p-mapconsultez la documentation sur GitHub.

Conclusion

Et voilà, les amis ! Nous avons exploré une erreur courante lors de la cartographie des promesses et couvert trois solutions efficaces :

1. En utilisant for...of pour les opérations séquentielles 🌀
2. En utilisant Promise.all pour une exécution parallèle 👌🏽
3. Une solution plus propre utilisant le p-map module 🌟

J’espère que cela vous aidera à devenir un pro de la cartographie des promesses ! Bon codage ! 🎉

N’hésitez pas à déposer toutes les questions ou exemples que vous avez rencontrés dans les commentaires ci-dessous. En attendant la prochaine fois, bonne chance dans votre voyage JavaScript ! Aimez-vous également des sujets similaires mais au format vidéo ? Suivez-moi sur YouTube pour plus de leçons sur JavaScript et le développement Web!