Comment gérer correctement la boucle de promesse dans JavaScript ES6 ?

JavaScript ES6 Promise Looping

Dans JavaScript ES6, les promesses offrent un mécanisme de programmation asynchrone. Cependant, utiliser des promesses dans une boucle for présente un défi, car la nature synchrone de la boucle peut conduire à un comportement inattendu.

Chaînage de promesses asynchrones

Pour garantir que chaque promesse s'exécute ce n'est qu'une fois son prédécesseur résolu que nous devons implémenter un chaînage de promesses asynchrone. Cela implique de créer chaque promesse uniquement lorsque la précédente est résolue.

Création de promesse avec setTimeout()

Pour simuler des opérations asynchrones, nous utilisons souvent setTimeout(). Cependant, pour que le chaînage fonctionne efficacement, nous avons besoin d’une version de setTimeout() basée sur Promise. Voici une fonction qui promet setTimeout() :

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

Options de solution

Avec la promesse setTimeout() en place, plusieurs options sont disponibles pour le chaînage de promesses asynchrones dans une boucle for :

1. Boucle for avec promesse initiale :

Cette méthode utilise une boucle for qui commence par une promesse à résolution immédiate. Chaque itération enchaîne une nouvelle promesse basée sur le résultat de la précédente.

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 :

Cette solution utilise Array#reduce pour parcourir une plage de valeurs et créer des promesses basées sur le résultat de chaque étape.

const delayAndLog = (acc, i) => acc.then(() => delay(Math.random() * 1000))
         .then(() => console.log(i));

[...Array(10).keys()].reduce(delayAndLog, Promise.resolve());

3. Fonction récursive avec résolution promise :

Cette méthode implique une fonction qui s'appelle elle-même dans un rappel then. Chaque appel résout la promesse résultante lorsque la prochaine itération est prête.

let i = 0;
const loop = () => delay(Math.random() * 1000)
        .then(() => console.log(i++))
        .then(loop);

loop().then(() => {});

4. async/await (ES2017) :

ES2017 a introduit async/await, qui permet un code asynchrone plus concis.

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

loop();

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

ES2020 introduit pour wait...of la syntaxe, qui simplifie l'itération asynchrone.

async function* loop() {
    for (let i of [...Array(10).keys()]) {
        yield await delay(Math.random() * 1000);
    }
}

for await (const i of loop()) {
    console.log(i);
}

Ces solutions garantissent que chaque promesse dans la boucle ne s'exécute qu'après que la précédente a été résolue, comme souhaité.

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!