Comment sérialiser les promesses dans une boucle For JavaScript ES6 ?

JavaScript ES6 Promise For Loop Serialization

Dans le code donné, vous tentez d'exécuter des promesses de manière séquentielle dans une boucle for mais rencontrez un problème où la boucle s'exécute de manière synchrone, ce qui entraîne une sortie imprévisible.

Comprendre le Problème :

Une promesse encapsule une opération asynchrone, mais la nature synchrone de la boucle déclenche toutes les promesses simultanément, sans tenir compte de la séquence souhaitée.

setTimeout prometteur :

Pour faciliter l'exécution séquentielle, nous pouvons promettre setTimeout pour obtenir une promesse qui se résout lorsque le le délai expire :

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

Options de solution :

Il existe plusieurs façons de résoudre ce problème, en tirant parti des promesses et des techniques de programmation asynchrone.

1. Boucle For avec promesse initiale :

En commençant par une promesse à résolution immédiate, vous pouvez enchaîner les promesses suivantes au fur et à mesure que les précédentes se résolvent :

for (let i = 0, p = Promise.resolve(); i < 10; i++) {
  p = p
    .then(() => delay(Math.random() * 1000))
    .then(() => console.log(i));
}

2. Array.reduce avec promesse initiale :

En utilisant Array.reduce, vous pouvez créer une chaîne de promesses similaire à l'approche de la boucle for :

[...Array(10)]
  .reduce(
    (p, _, i) =>
      p.then(() => delay(Math.random() * 1000))
        .then(() => console.log(i)),
    Promise.resolve()
  );

3. Fonctionner comme rappel de résolution de promesse :

Vous pouvez définir une fonction qui se transmet comme rappel de résolution, permettant une chaîne de promesses récursive :

const loop = (i) => {
  delay(Math.random() * 1000)
    .then(() => console.log(i))
    .then(() => {
      if (i < 10) loop(i + 1);
    });
};
loop(0);

4. Syntaxe async/await (ES2017) :

ES2017 a introduit la syntaxe async/await pour simplifier la gestion du code asynchrone :

const main = async () => {
  for (let i = 0; i < 10; i++) {
    await delay(Math.random() * 1000);
    console.log(i);
  }
};
main();

5. for wait...of Syntax (ES2020) :

ES2020 a introduit une syntaxe spéciale pour itérer sur les itérables asynchrones :

(async () => {
  for await (const i of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]) {
    await delay(Math.random() * 1000);
    console.log(i);
  }
})();

En utilisant ces techniques, vous pouvez exécuter les promesses de manière séquentielle dans une boucle, garantissant l'ordre souhaité des opérations et évitant les sorties imprévisibles.

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!