Boucles asynchrones en JavaScript : for...of vs forEach

Les capacités asynchrones de JavaScript sont plutôt cool ?, mais choisir la bonne boucle pour gérer ces tâches asynchrones peut faire une grande différence. Décomposons la différence entre for...of et forEach avec une touche de plaisir ?

1. pour...de boucle avec fonctions asynchrones
Imaginez la boucle for...of comme votre ami super diligent qui attend patiemment que vous ayez terminé une tâche avant de commencer la suivante. C'est comme attendre que votre café soit prêt avant de commencer votre prochaine tâche.

for (const item of items) {
  await doSomethingAsync(item);
}

Supposons que vous disposiez d'un ensemble de tâches dont chacune renvoie une promesse résolue avec un délai :

function doSomethingAsync(item) {
  return new Promise((resolve) => {
    setTimeout(() => resolve(`Processed ${item}`), 1000);
  });
}

async function processItemsSequentially(items) {
  for (const item of items) {
    try {
      const result = await doSomethingAsync(item);
      console.log(result);
    } catch (error) {
      console.error(`Oops! Error with ${item}:`, error);
    }
  }
}

const items = ['Task 1', 'Task 2', 'Task 3'];
processItemsSequentially(items);

processItemsSequentially attend la fin de chaque appel doSomethingAsync avant de passer à l'élément suivant.

Pourquoi vous allez l'adorer :

?️ Patience : il attend la fin de chaque tâche asynchrone avant de passer à autre chose. Il s’agit de cette vie ordonnée.

? Gestion des erreurs : vous pouvez facilement détecter et gérer les erreurs dans la boucle.

? Parfait pour : Lorsque vous avez besoin que les choses soient faites dans l'ordre, comme préparer un repas où vous ne pouvez pas faire cuire le gâteau avant de mélanger la pâte XD.

---

2. forEach avec fonctions asynchrones
D’un autre côté, forEach est comme une bande d’amis qui commencent tous leurs tâches en même temps. Ils sont excités et veulent finir le plus vite possible. Ils ne se soucient pas qu’une personne finisse avant les autres ; ils y vont!

items.forEach(async (item) => {
  await doSomethingAsync(item);
});

Utilisons la même fonction doSomethingAsync mais avec forEach :

async function processItemsConcurrently(items) {
  items.forEach(async (item) => {
    try {
      const result = await doSomethingAsync(item);
      console.log(result);
    } catch (error) {
      console.error(`Whoops! Issue with ${item}:`, error);
    }
  });
}

const items = ['Task A', 'Task B', 'Task C'];
processItemsConcurrently(items);

processItemsConcurrently démarre tous les appels doSomethingAsync simultanément, de sorte que toutes les tâches s'exécutent en parallèle.

Pourquoi c'est amusant :

?‍♂️?‍♀️ Exécution parallèle : toutes les tâches démarrent en même temps, ce qui peut être super rapide mais un peu chaotique.

✂️ Syntaxe plus simple : souvent plus courte et plus concise que pour...of.

? Parfait pour : lorsque les tâches ne dépendent pas les unes des autres et peuvent être effectuées indépendamment, comme récupérer des données à partir de plusieurs API.

Rappelez-vous :
car...de est ton ami ordonné qui attend son tour.
forEach consiste à intervenir en même temps et à faire avancer les choses rapidement.

for...of vous permet de détecter les erreurs une par une, ce qui est propre et bien rangé.
forEach vous permet de gérer les erreurs à la volée, comme jongler avec plusieurs balles.

for...of est peut-être un peu plus lent, mais c'est propre et ordonné.
forEach peut être plus rapide si vous êtes à l'aise avec le chaos et que les tâches ne se chevauchent pas.

Choisissez la boucle qui correspond à vos besoins selon que vous avez besoin d'ordre et de patience ou de vitesse et d'excitation ! ??

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!