Wie serialisiere ich Versprechen in einer JavaScript ES6 For-Schleife?

JavaScript ES6 Promise For-Loop-Serialisierung

Im angegebenen Code versuchen Sie, Versprechen sequentiell innerhalb einer for-Schleife auszuführen, stoßen jedoch auf ein Problem Die Schleife wird synchron ausgeführt, was zu einer unvorhersehbaren Ausgabe führt.

Verstehen des Problem:

Ein Versprechen kapselt einen asynchronen Vorgang, aber die synchrone Natur der Schleife löst alle Versprechen gleichzeitig aus und ignoriert die gewünschte Reihenfolge.

Promisifying setTimeout:

Um die sequentielle Ausführung zu erleichtern, können wir setTimeout versprechen, um ein Versprechen zu erhalten, das aufgelöst wird, wenn das Timer läuft ab:

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

Lösungsoptionen:

Es gibt mehrere Möglichkeiten, dieses Problem zu lösen, indem Versprechen und asynchrone Programmiertechniken genutzt werden.

1. For-Schleife mit anfänglichem Versprechen:

Indem Sie mit einem sofort auflösenden Versprechen beginnen, können Sie nachfolgende Versprechen verketten, während die vorherigen 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. Array.reduce mit Initial Promise:

Mit Array.reduce können Sie eine Kette von Versprechen ähnlich dem for-Loop-Ansatz erstellen:

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

3. Funktion als Promise Resolution Callback:

Sie können eine Funktion definieren, die sich selbst als Resolution Callback übergibt und so eine rekursive Promise Chain ermöglicht:

const loop = (i) => {
  delay(Math.random() * 1000)
    .then(() => console.log(i))
    .then(() => {
      if (i < 10) loop(i + 1);
    });
};
loop(0);

4. async/await-Syntax (ES2017):

ES2017 hat die async/await-Syntax eingeführt, um die asynchrone Codeverarbeitung zu vereinfachen:

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

5. for waiting...of Syntax (ES2020):

ES2020 hat eine spezielle Syntax für die Iteration über asynchrone Iterables eingeführt:

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

Durch die Verwendung dieser Techniken können Sie Versprechen nacheinander ausführen innerhalb einer Schleife, um die gewünschte Reihenfolge der Vorgänge sicherzustellen und unvorhersehbare Ausgaben zu vermeiden.

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