Comment puis-je exécuter séquentiellement des promesses dans une boucle For JavaScript ES6 ?

Promesse JavaScript ES6 pour la boucle

En programmation, une tâche courante consiste à parcourir une collection et à effectuer des opérations asynchrones sur chaque élément. Dans JavaScript ES6, les promesses offrent un moyen puissant d'y parvenir. Cependant, garantir que chaque promesse ne s'exécute qu'après la précédente peut s'avérer difficile.

Dans l'extrait de code fourni, la boucle for crée toutes les promesses de manière synchrone, ce qui entraîne une sortie aléatoire. Notre objectif est de faire en sorte que chaque promesse s'exécute de manière séquentielle (.then()).

SetTimeout prometteur

Pour améliorer notre code, créons une version promise de setTimeout :

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

Cette fonction renvoie une promesse qui se résout à l'expiration du délai, nous permettant d'enchaîner facilement les promesses.

Chaînage Promesses

Avec un setTimeout promis, plusieurs méthodes existent pour mettre en œuvre le chaînage souhaité :

1. Avec for

À l'aide d'une boucle for, créez une promesse initiale à résolution immédiate et enchaînez les nouvelles promesses 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. Avec Array.reduce

Une autre option consiste à utiliser Array.reduce :

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

3. Avec fonction récursive

Une fonction récursive peut également être utilisée :

const loopPromise = (i, p) => {
    if (i >= 10) {
        return;
    }
    p.then(() => delay(Math.random() * 1000))
     .then(() => console.log(i))
     .then(() => loopPromise(i + 1, p));
};

loopPromise(0, Promise.resolve());

4. Avec Async / Await

Cette syntaxe est disponible dans ECMAScript 2017 :

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

asyncLoop();

5. Avec for wait...of

Introduite dans ECMAScript 2020, cette syntaxe simplifie encore la boucle :

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

En tirant parti de ces méthodes, nous pouvons enchaîner efficacement les promesses dans une boucle for, garantissant que chaque promesse ne s'exécute qu'après la résolution de son prédécesseur.

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!