Wie erreicht man eine asynchrone Verkettung mit Versprechen in JavaScript?

Asynchrone Verkettung mit Versprechen in JavaScript ES6

Das JavaScript-Code-Snippet stellte Versuche bereit, Versprechen innerhalb einer Schleife zu erstellen, scheiterte jedoch an der Synchronität Art der Schleife. Um dieses Problem anzugehen, müssen wir jedes Versprechen nacheinander erstellen und auflösen, was zu einem asynchronen Versprechen führt.

Es gibt mehrere Ansätze, um diese Verkettung zu erreichen:

Verwenden einer For-Schleife mit einem Anfängliches Versprechen:

Initialisieren Sie ein Versprechen, das sich sofort auflöst, und verketten Sie dann wie jedes vorherige Versprechen neue Versprechen an dieses erste Versprechen löst auf.

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

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

Verwenden von Array.reduce mit einem anfänglichen Versprechen:

Ähnlich wie beim for-Schleifen-Ansatz verwenden Sie Array.reduce, um Versprechen zu verketten, beginnend mit einem anfängliches Versprechen.

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

Verwendung einer rekursiven Verkettung Funktion:

Definieren Sie eine Funktion, die sich selbst als Auflösungsrückruf aufruft (wie eine Versprechenskette) und den aktuellen Index als Argument übergibt.

const chainPromises = (i = 0) => {
    if (i >= 10) return;

    delay(Math.random() * 1000).then(() => {
        console.log(i);
        chainPromises(i + 1);
    });
};

chainPromises();

Mit Async /Await (ES2017):

Verwenden Sie async/await, um die Ausführung der Funktion bis zum Versprechen anzuhalten wird aufgelöst.

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

asyncPromises();

Verwenden von For Await...Of (ES2020):

Ähnlich wie async/await verwenden Sie die for-await...of-Syntax für Iterieren Sie über ein asynchrones Iterable.

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

asyncPromises();

Das obige ist der detaillierte Inhalt vonWie erreicht man eine asynchrone Verkettung mit Versprechen in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!