Maison >interface Web >js tutoriel >Comment puis-je exécuter plusieurs opérations asynchrones simultanément en JavaScript ?

Comment puis-je exécuter plusieurs opérations asynchrones simultanément en JavaScript ?

Patricia Arquette
Patricia Arquetteoriginal
2024-12-07 22:41:171031parcourir

How Can I Run Multiple Async Operations Concurrently in JavaScript?

Exécution simultanée de plusieurs opérations asynchrones

Problème :

Dans le code ci-dessous, le les opérations asynchrones sont exécutées séquentiellement et non simultanément :

const value1 = await getValue1Async();
const value2 = await getValue2Async();

Pour exécuter les opérations en même temps, nous devons modifier le code.

Solution :

TL;DR

Utilisez Promise.all au lieu de l'attente séquentielle pattern :

const [value1, value2] = await Promise.all([getValue1Async(), getValue2Async()]);

Détails :

La solution d'origine exécute les deux opérations en parallèle mais attend que la première se termine avant d'attendre la seconde. Cela peut entraîner des problèmes de performances si une opération prend beaucoup plus de temps que l'autre.

Promise.all nous permet d'attendre que plusieurs opérations se terminent simultanément. Il prend un tableau de promesses et renvoie une promesse qui se résout en un tableau de résultats dans le même ordre que le tableau d'origine.

Avantages de Promise.all :

  • Exécution simultanée des opérations
  • Gère correctement le rejet si l'une des promesses est rejetée
  • Plus concis code

Attention :

Notez que si la deuxième promesse est rejetée avant que la première promesse ne soit résolue, le modèle « obtenir la promesse puis l'attendre » peut entraîner une erreur de « rejet non géré ». Cela peut être évité en utilisant Promise.all.

Exemple :

Voici un exemple révisé utilisant Promise.all :

const getValue1Async = () => {
  return new Promise(resolve => {
    setTimeout(resolve, 500, "value1");
  });
};

const getValue2Async = () => {
  return new Promise((resolve, reject) => {
    setTimeout(reject, 100, "error");
  });
};

(async () => {
  try {
    console.time("Promise.all");
    const [value1, value2] = await Promise.all([getValue1Async(), getValue2Async()]);
  } catch (e) {
    console.timeEnd("Promise.all", e);
  }
})();

Ce code montre comment Promise.all permet l'exécution simultanée des deux opérations asynchrones, ce qui permet une exécution plus rapide.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn