Die Fallstricke von Async/Await in Array Loops

Blog

Die Fallstricke von Async/Await in Array Loops

Die Verwendung von async/await beim Durchlaufen von Arrays in einer Javascript-Schleife scheint einfach zu sein, aber es gibt ein nicht intuitives Verhalten, auf das Sie beim Kombinieren der beiden achten müssen.



Schauen wir uns drei verschiedene Beispiele an, um zu sehen, worauf Sie achten sollten und welche Schleife für bestimmte Anwendungsfälle am besten geeignet ist.

für jeden

Wenn Sie nur eines aus diesem Artikel mitnehmen, lassen Sie es dieses sein: |_+_| / **async** funktioniert nicht bei |_+_|. Sehen wir uns ein Beispiel an, um zu sehen, warum:



**await**

**Array.prototype.forEach**

⚠️ Problem 1:



Der obige Code wird glücklich ausgeführt. Beachten Sie jedoch, dass |_+_| trotz der Verwendung von |_+_| . zuerst abgemeldet wurde vor |_+_|. Das erste Problem ist, dass du nicht |_+_| . kannst die gesamte Schleife bei Verwendung von |_+_|.

soll ich in bytecoin investieren?

⚠️️Problem 2:

Außerdem trotz der Verwendung von |_+_| innerhalb der Schleife wartete es nicht, bis jede Anforderung abgeschlossen war, bevor die nächste ausgeführt wurde. Also wurden die Anfragen außer der Reihenfolge protokolliert. Wenn die erste Anfrage länger dauert als die folgenden Anfragen, kann sie immer noch als letzte abgeschlossen werden.

Aus diesen beiden Gründen ist |_+_| sollten Sie sich nicht darauf verlassen, wenn Sie |_+_|/|_+_| verwenden.

Versprechen.all

Lassen Sie uns das Problem lösen, auf das Ende der gesamten Schleife zu warten. Seit dem |_+_| Operation erstellt ein |_+_| Unter der Haube können wir |_+_| . verwenden um alle Anfragen parallel auszuführen, dann |_+_| die Endergebnisse aus der Schleife:

const urls = [ 'https://jsonplaceholder.typicode.com/todos/1', 'https://jsonplaceholder.typicode.com/todos/2', 'https://jsonplaceholder.typicode.com/todos/3' ]; async function getTodos() { await urls.forEach(async (url, idx) => { const todo = await fetch(url); console.log(`Received Todo ${idx+1}:`, todo); }); console.log('Finished!'); } getTodos();

Finished! Received Todo 2, Response: { ··· } Received Todo 1, Response: { ··· } Received Todo 3, Response: { ··· }

Wir haben das Problem gelöst, auf den Abschluss jeder Anfrage zu warten, bevor wir fortfahren. Es scheint auch, dass wir das Problem gelöst haben, dass die Anfragen nicht in Ordnung sind, aber das ist nicht so Exakt der Fall.

Wie bereits erwähnt, |_+_| hält alle ihm gegebenen Versprechen ein parallel zu . Es wird nicht warten, bis die erste Anfrage zurückkommt, bevor die zweite oder dritte Anfrage ausgeführt wird. Für die meisten Zwecke ist dies in Ordnung und eine sehr performante Lösung. Aber wenn Sie wirklich brauchen, um jede Anfrage zu erfüllen in Ordnung , |_+_| wird das nicht lösen.

für…von

Wir wissen jetzt, dass |_+_| respektiert |_+_|/|_+_| . nicht überhaupt und |_+_| funktioniert nur, wenn die Reihenfolge der Ausführung keine Rolle spielt. Schauen wir uns eine Lösung an, die beide Fälle löst.

Die |_+_| Schleife wird in der erwarteten Reihenfolge ausgeführt — wartet auf jedes vorherige |_+_| Vorgang abzuschließen, bevor Sie mit dem nächsten fortfahren:

Finished!

await

Mir gefällt besonders, dass diese Methode es dem Code ermöglicht, linear zu bleiben – was einer der Hauptvorteile der Verwendung von |_+_|/|_+_| ist. Ich finde es viel einfacher zu lesen als die Alternativen.

Wenn Sie keinen Zugriff auf den Index benötigen, wird der Code noch prägnanter:

urls.forEach

Einer der größten Nachteile bei der Verwendung eines |_+_| loop ist, dass es im Vergleich zu den anderen Schleifenoptionen in Javascript schlecht abschneidet. Das Leistungsargument ist jedoch vernachlässigbar, wenn es für |_+_| . verwendet wird asynchrone Aufrufe, da die Absicht besteht, die Schleife zu halten, bis jeder Aufruf aufgelöst wird. Normalerweise verwende ich nur |_+_| wenn die asynchrone Ausführungsreihenfolge von Bedeutung ist.

Notiz: Sie können auch grundlegende |_+_| . verwenden Schleifen, um alle Vorteile von |_+_| zu nutzen, aber ich mag die Einfachheit und Lesbarkeit, die |_+_| auf den Tisch bringt.

Wenn Sie diesen Artikel hilfreich fanden und mehr sehen möchten, lassen Sie es mich bitte wissen, indem Sie ein paar Klatschen hinterlassen! Folgen Sie für weitere Artikel wie diesen.

Erfahren Sie mehr

Maschinelles Lernen in JavaScript mit TensorFlow.js

ES5 bis ESNext – hier sind alle Funktionen, die seit 2015 zu JavaScript hinzugefügt wurden

5 Javascript (ES6+)-Funktionen, die Sie 2019 verwenden sollten

Vuejs 2 Authentifizierungs-Tutorial

Vue-Authentifizierung und Routenbehandlung mit Vue-router

So klonen Sie ein Array in JavaScript tief

Javascript null oder leer

Erstellen Sie ein CMS mit Laravel und Vue

Der komplette JavaScript-Kurs 2019: Reale Projekte erstellen!

JavaScript Bootcamp - Erstellen Sie reale Anwendungen

JavaScript: Die seltsamen Teile verstehen

Vue JS 2 - Das komplette Handbuch (inkl. Vue Router & Vuex)

Das vollständige JavaScript- und ES6-Tutorial - (einschließlich ES7 und React)

Das moderne JavaScript Bootcamp (2019)

#javascript #web-entwicklung