Verwendung von asynchronem Schleifendurchlauf in JS

Referenz: So durchlaufen Sie die Sequenz, um asynchrone Vorgänge im Blog-CSDN-Blog von JS_js asynchronous loop_ienyh auszuführen

Verwendung von asynchronem Schleifendurchlauf in JS

Damit asynchrone Vorgänge in synchroner Reihenfolge ausgeführt werden , muss jeder asynchrone Vorgang nacheinander mit der Schleife ausgeführt werden

1. Für forEach(mit Vorsicht verwenden)

forEach Die Methode ist synchronDas heißt,  forEach die Rückruffunktion wird synchron aufgerufen und  forEach im Rückruf werden asynchrone Vorgänge ausgeführt. Diese bei jedem Durchlauf ausgeführten asynchronen Vorgänge werden parallel ausgeführt. Jede Iteration wird unmittelbar nach Abschluss der vorherigen Iteration ausgeführt. Daher ist es nicht möglich, asynchrone Vorgänge in forEach zu verwenden, da dies zu einer Blockierung des Ausführungsflusses führt und die Abschlussreihenfolge der asynchronen Vorgänge nicht garantiert ist.

//定义一个异步函数
const foo1 = (i:any)=>{
  return new Promise((resolve, reject) => {
    setTimeout(() =>{
      console.log(i);
      resolve(i)

    },1000)
    
  })
}
const arr = [1,2,3,4,5]
const b = () =>{
  arr.forEach(async e => {
    console.log(e);
    
    await foo1(e)
  });
}
b(); // 1 2 3 4 5 1 2 3 4 5

2. For for-Schleifen (nicht empfohlen)

forDie Methode ist asynchron, das heißt, jede Schleife kann asynchrone Operationen nacheinander ausführen.
Nachteile: Der Umfang jeder Schleife ist eins, was dazu führen kann, dass die asynchrone Operation in die nächste Iteration eintritt, bevor sie endet.

//定义一个异步函数
const foo1 = (i:any)=>{
  return new Promise((resolve, reject) => {
    setTimeout(() =>{
      console.log(i);
      resolve(i)

    },1000)
    
  })
}
const arr = [1,2,3,4,5]
async function a() {
  for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
    
    await foo1(arr[i])
  }
}
a() // 输出：1 1 2 2 3 3 4 4 5 5

3. Für die for of-Schleife (empfohlen)

Es handelt sich um eine neue Schleifenschnittstelle, die in ES6 zum Durchlaufen iterierbarer Objekte wie Arrays, Maps und Sets eingeführt wurde. Bei der Verwendung asynchroner Vorgänge ist die for...of-Schleife die am meisten empfohlene Methode, da sie bei jeder Iteration einen neuen Bereich erstellt, der die Unabhängigkeit und Sicherheit asynchroner Vorgänge gewährleisten kann.

Es kann warten, bis die asynchrone Ausführung beendet ist, bevor mit der nächsten Iteration begonnen wird

async function processData(data) {
  for (const item of data) {
    await doAsyncOperation(item);
  }
}

async function doAsyncOperation(item) {
  return new Promise((resolve, reject) => {
    // 异步操作代码
  });
}

In diesem Beispiel processData verwendet die Funktion  for...of eine Schleife, um die Daten zu durchlaufen und bei jeder Iteration auf den Abschluss des asynchronen Vorgangs zu warten. doAsyncOperation Die Funktion gibt eins zurück  Promise, sodass  processData die Funktion auf den Abschluss warten kann. Auf diese Weise wird die Ausführungsreihenfolge asynchroner Vorgänge garantiert.

4. Sie können auch Promise.all verwenden, um

async function processData(data) {
  const promises = data.map(doAsyncOperation);
  await Promise.all(promises);
}

async function doAsyncOperation(item) {
  return new Promise((resolve, reject) => {
    // 异步操作代码
  });
}

In diesem Beispiel processData verwendet die Funktion  map eine Methode, um ein  Promise Array zu erstellen, das alle asynchronen Vorgänge enthält, und ruft die Methode für das Array auf  Promise.all . Promise.all Die Methode wartet auf den Abschluss aller asynchronen Vorgänge und gibt dann ihre Ergebnisse als Array zurück. Auf diese Weise werden alle asynchronen Vorgänge parallel ausgeführt.

Zusammenfassung: Wenn Sie asynchrone Operationen in einer Schleife aufrufen müssen, verwenden Sie daher forEach (synchron) mit Vorsicht. For-Schleifen werden nicht empfohlen (jede Iteration befindet sich im selben Bereich). Es wird empfohlen, for of und Promise.all zu verwenden.