Wie kann ich Versprechen in einer JavaScript ES6 For-Schleife nacheinander ausführen?

JavaScript ES6 Promise for Loop

Bei der Programmierung besteht eine häufige Aufgabe darin, eine Sammlung zu durchlaufen und asynchrone Operationen für jedes Element auszuführen. In JavaScript ES6 bieten Versprechen ein leistungsstarkes Mittel, um dies zu erreichen. Allerdings kann es eine Herausforderung sein, sicherzustellen, dass jedes Versprechen erst nach dem vorhergehenden ausgeführt wird.

Im bereitgestellten Codeausschnitt erstellt die for-Schleife alle Versprechen synchron, was zu einer zufälligen Ausgabe führt. Unser Ziel ist es, dass jedes Versprechen nacheinander ausgeführt wird (.then()).

setTimeout versprechen

Um unseren Code zu verbessern, erstellen wir eine versprochene Version von setTimeout:

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

Diese Funktion gibt ein Versprechen zurück, das aufgelöst wird, wenn der Timer abläuft, sodass wir Versprechen einfach verketten können.

Verkettung Versprechen

Bei einem versprochenen setTimeout gibt es mehrere Methoden, um die gewünschte Verkettung zu implementieren:

1. Mit for

Erstellen Sie mithilfe einer for-Schleife ein erstes, sich sofort auflösendes Versprechen und verketten Sie neue Versprechen, während vorherige aufgelöst werden:

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

2. Mit Array.reduce

Eine andere Möglichkeit ist die Verwendung von Array.reduce:

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

3. Mit rekursiver Funktion

Eine rekursive Funktion kann ebenfalls verwendet werden:

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. Mit Async / Await

Diese Syntax ist in ECMAScript 2017 verfügbar:

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

asyncLoop();

5. Mit for waiting...of

Eingeführt in ECMAScript 2020, vereinfacht diese Syntax die Schleife weiter:

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

Durch die Nutzung dieser Methoden können wir Versprechen effektiv in einer for-Schleife verketten und so sicherstellen dass jedes Versprechen erst ausgeführt wird, nachdem sein Vorgänger aufgelöst wurde.

Das obige ist der detaillierte Inhalt vonWie kann ich Versprechen in einer JavaScript ES6 For-Schleife nacheinander ausführen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!