Wie gehe ich mit Promise-Looping in JavaScript ES6 richtig um?

JavaScript ES6 Promise Looping

In JavaScript ES6 bieten Versprechen einen Mechanismus für die asynchrone Programmierung. Die Verwendung von Versprechen innerhalb einer for-Schleife stellt jedoch eine Herausforderung dar, da die Synchronität der Schleife zu unerwartetem Verhalten führen kann.

Asynchrone Versprechensverkettung

Um sicherzustellen, dass jedes Versprechen ausgeführt wird Erst nachdem sein Vorgänger aufgelöst wurde, müssen wir die asynchrone Versprechensverkettung implementieren. Dabei wird jedes Versprechen erst dann erstellt, wenn das vorherige aufgelöst wurde.

Versprechenserstellung mit setTimeout()

Um asynchrone Vorgänge zu simulieren, verwenden wir häufig setTimeout(). Damit die Verkettung jedoch effektiv funktioniert, benötigen wir eine Promise-basierte Version von setTimeout(). Hier ist eine Funktion, die setTimeout() verspricht:

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

Lösungsoptionen

Wenn das versprochene setTimeout() vorhanden ist, stehen mehrere Optionen für die asynchrone Versprechenverkettung innerhalb zur Verfügung eine for-Schleife:

1. for-Schleife mit anfänglichem Versprechen:

Diese Methode verwendet eine for-Schleife, die mit einem sofort auflösenden Versprechen beginnt. Jede Iteration verkettet ein neues Versprechen basierend auf dem Ergebnis des vorherigen.

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

2. Array#reduce mit Initial Promise:

Diese Lösung verwendet Array#reduce, um einen Wertebereich zu durchlaufen und Versprechen basierend auf dem Ergebnis jedes Schritts zu erstellen.

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

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

3. Rekursive Funktion mit Promise-Auflösung:

Diese Methode beinhaltet eine Funktion, die sich selbst innerhalb eines then-Rückrufs aufruft. Jeder Aufruf löst das resultierende Versprechen auf, wenn die nächste Iteration bereit ist.

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

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

4. async/await (ES2017):

ES2017 führte async/await ein, was prägnanteren asynchronen Code ermöglicht.

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

loop();

5. für „await...of“ (ES2020):

ES2020 hat die Syntax für „await...of“ eingeführt, die die asynchrone Iteration vereinfacht.

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);
}

Diese Lösungen stellen sicher, dass jedes Versprechen in Die Schleife wird erst ausgeführt, nachdem die vorherige wie gewünscht aufgelöst wurde.

Das obige ist der detaillierte Inhalt vonWie gehe ich mit Promise-Looping in JavaScript ES6 richtig um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!