So verwenden Sie async und await richtig in JS-Schleifen

Übersicht (Loop-Modus – Allgemein)

• für
• Karte
• fürJedes
• Filter

Deklarieren Sie ein Array und eine asynchrone Methode zum Iterieren

Deklarieren Sie ein Array: ⬇️

const Fähigkeiten = ['js', 'vue', 'node', 'reagieren']

Deklarieren Sie einen weiteren asynchronen Promise-Code: ⬇️

Funktion getSkillPromise (Wert) {
  returniere neues Promise((lösen, ablehnen) => {
    setzeTimeout(() => {
      Auflösung (Wert)
    }, 1000)
  })
}

Verwendung in einer For-Schleife

Da die For-Schleife keine Funktion ist und „async“ und „await“ in Funktionen verwendet werden müssen, müssen wir eine Funktionsebene in die For-Schleife einbinden.

asynchroner Funktionstest () {
  für (lass i = 0; i < Fähigkeiten.Länge; i++) {
    const Fähigkeit = Fähigkeiten[i]
    const res = warte auf getSkillPromise(Fähigkeit)
    Konsole.log(res)
  }
}

test() // Aufruf 

Wenn Sie „await“ verwenden, möchten Sie, dass JavaScript die Ausführung anhält, bis das erwartete Versprechen ein Ergebnis zurückgibt. Das obige Ergebnis bedeutet, dass Sie, wenn die For-Schleife asynchronen Code enthält, warten können, bis der asynchrone Code in der For-Schleife vollständig ausgeführt wurde, bevor Sie den Code nach der For-Schleife ausführen.

Es kann jedoch keine Rückrufschleifen wie forEach, Map, Filter usw. verarbeiten. Nachfolgend finden Sie eine detaillierte Analyse.

In Karte verwenden

Bei der Verwendung von „await“ in „map“ ist der Rückgabewert von „map“ immer ein Promise-Array, da asynchrone Funktionen immer Promises zurückgeben.

asynchroner Funktionstest () {
  console.log('starten')
  const res = Fähigkeiten.map(async item => {
    Rückgabewert: warte auf getSkillPromise(Artikel)
  })
  Konsole.log(res)
  console.log('Ende')
}

prüfen()

Ergebnis: immer eine Reihe von Versprechungen

Start
[
  Versprechen { <ausstehend> },
  Versprechen { <ausstehend> },
  Versprechen { <ausstehend> },
  Versprechen { <ausstehend> }
]
Ende

Wenn Sie warten möchten, bis das Versprechen erfüllt ist, können Sie promise.all() verwenden, um dies zu handhaben.

asynchroner Funktionstest () {
  console.log('starten')
  const res = Fähigkeiten.map(async item => {
    Rückgabewert: warte auf getSkillPromise(Artikel)
  })
  const resPromise = warte auf Promise.all(res)
  console.log(resPromise)
  console.log('Ende')
}

prüfen()

// Ergebnis starten
[ 'js', 'vue', 'Knoten', 'reagieren' ]
Ende

Verwendung in forEach

Erstens der Code und die Ergebnisse

asynchroner Funktionstest () {
  console.log('starten')
  Fähigkeiten.fürJeden(async item => {
    const res = warte auf getSkillPromise(Element).
    Konsole.log(res)
  })
  console.log('Ende')
}

prüfen()

Erwartete Ergebnisse

'Start'

'js'

'Ansicht'

'Knoten'

'reagieren'

'Ende'

Das tatsächliche Ergebnis ist, dass console.log('end') ausgeführt wird, bevor die forEach-Schleife auf die Rückgabe des asynchronen Ergebnisses wartet.

'Start'

'Ende'

'js'

'Ansicht'

'Knoten'

'reagieren'

forEach in JavaScript unterstützt weder Promise Awareness noch Async und Await. Sie können also Await nicht in forEach verwenden.

Im Filter verwenden

Verwenden Sie den Filter, um das Element als Vue- oder React-Option zu filtern.

Filter normal verwenden:

asynchroner Funktionstest () {
  console.log('starten')
  const res = Fähigkeiten.Filter(item => {
    returniere ['vue', 'reagieren'].includes(Element)
  })
  Konsole.log(res)
  console.log('Ende')
}

test() // Aufruf // Ergebnis start
[ "vue", "reagieren"]
Ende

Nach der Verwendung von await:

asynchroner Funktionstest () {
  console.log('starten')
  const res = Fähigkeiten.Filter(async item => {
    const Skill = warte auf getSkillPromise(Element).
    returniere ['vue', 'reagieren'].includes(Element)
  })
  Konsole.log(res)
  console.log('Ende')
}

prüfen()

Erwartete Ergebnisse:

Start

[ "vue", "reagieren"]

Ende

Tatsächliches Ergebnis:

[ 'js', 'vue', 'Knoten', 'reagieren' ]

Ende

Fazit: Da das von der asynchronen Funktion getSkillPromise zurückgegebene Versprechen immer wahr ist, passieren alle Optionen den Filter.

Im Anhang befindet sich eine Nutzungszusammenfassung

1. Wenn Sie Await-Aufrufe seriell ausführen möchten, verwenden Sie eine For-Schleife (oder eine beliebige Schleife ohne Rückrufe).
2. Verwenden Sie „await“ niemals mit „forEach“, sondern stattdessen eine „for“-Schleife (oder eine beliebige Schleife ohne Rückrufe).
3. Verwenden Sie „await“ nicht in „filter“ und „reduce“. Verwenden Sie bei Bedarf „map“, um das Ergebnis weiter zu verarbeiten, und verwenden Sie dann „filter“ und „reduce“, um das Ergebnis zu verarbeiten.

Schlussfolgerung: Aufgrund der großen Formextraktionskomponente, die bei der Arbeit auftrat, trat bei der asynchronen Überprüfung dieses Problem auf. Später, nach Rücksprache mit den Daten, wurde das Ergebnis zusammengefasst

Zusammenfassen

Dies ist das Ende dieses Artikels über die korrekte Verwendung von async und await in JS-Schleifen. Weitere relevante Inhalte zur Verwendung von async und await in JS-Schleifen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!