JavaScript - Asynchrone Iteration

Hallo, zukünftige JavaScript-Zauberer! Heute machen wir uns auf eine aufregende Reise in die Welt der asynchronen Iteration. Keine Sorge, wenn diese Worte ein bisschen einschüchternd klingen – bis zum Ende dieser Lektion werdet ihr diese mächtigen Konzepte mit Selbstvertrauen wie ein Profi einsetzen können. Also, tauchen wir ein!

Asynchrone Iteration

Was ist Asynchrone Iteration?

Stellen Sie sich vor, Sie sind in einer belebten Café. Sie platzieren Ihre Bestellung, aber anstatt an der Theke zu warten, setzen Sie sich hin und plaudern mit Freunden, während Ihre Bestellung zubereitet wird. Das ist im Grunde, was asynchrone Operationen im Programmieren sind – Sie starten eine Aufgabe und gehen dann zu anderen Dingen über, während Sie auf deren Abschluss warten.

Asynchrone Iteration führt dieses Konzept einen Schritt weiter. Es ist, als ob Sie mehrere Bestellungen aufgegeben hätten, und jede wird Ihnen gebracht, sobald sie fertig ist, ohne dass Sie an der Theke nachschauen müssen.

In JavaScript ermöglicht asynchrone Iteration, dass wir mit asynchronen Datenquellen auf eine Weise arbeiten, die sich natürlich und sequenziell anfühlt, obwohl die Operationen im Hintergrund ablaufen.

Verständnis asynchroner Operationen

Bevor wir uns der asynchronen Iteration zuwenden, lassen Sie uns zunächst die asynchronen Operationen in JavaScript verstehen.

Versprechen: Die Bausteine

Versprechen (Promises) sind ein grundlegendes Konzept in asynchronem JavaScript. Sie repräsentieren einen Wert, der möglicherweise noch nicht verfügbar ist, aber zu einem bestimmten Zeitpunkt in der Zukunft gelöst wird.

Hier ist ein einfaches Beispiel:

let coffeePromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Ihre Bestellung ist bereit!");
}, 2000);
});

coffeePromise.then((message) => {
console.log(message);
});

In diesem Beispiel simuliert coffeePromise den Prozess des Kaffeekochens. Nach 2 Sekunden (als would-be Brühzeit), löst es mit einer Nachricht. Die then-Methode wird verwendet, um die gelöste Versprechen zu behandeln.

Async/Await: Syntaktischer Zucker für Versprechen

Die Syntax von async/await macht das Arbeiten mit Versprechen noch einfacher. Es ermöglicht Ihnen, asynchronen Code zu schreiben, der sich wie synchroner Code verhält.

async function getCoffee() {
let message = await new Promise((resolve) => {
setTimeout(() => {
resolve("Ihre Bestellung ist bereit!");
}, 2000);
});
console.log(message);
}

getCoffee();

Dieser Code macht dasselbe wie das vorherige Beispiel, aber er ist in einer Weise geschrieben, die einfacher zu lesen und zu verstehen ist.

Verwenden der 'for await...of' Schleife

Nun, da wir asynchrone Operationen verstehen, schauen wir uns an, wie wir mit der for await...of-Schleife darüber iterieren können.

Grundlegende Syntax

Die grundlegende Syntax einer for await...of-Schleife sieht so aus:

async function example() {
for await (let value of asyncIterable) {
console.log(value);
}
}

Ein praktisches Beispiel

Angenommen, wir haben eine asynchrone Funktion, die das Simulieren von Kaffeelieferungen darstellt:

async function* coffeeOrders() {
yield await Promise.resolve("Espresso");
yield await Promise.resolve("Latte");
yield await Promise.resolve("Cappuccino");
}

async function serveCoffee() {
for await (let coffee of coffeeOrders()) {
console.log(`Servieren: ${coffee}`);
}
}

serveCoffee();

In diesem Beispiel ist coffeeOrders eine asynchrone Generatorfunktion, die Kaffeelieferungen erzeugt. Die Funktion serveCoffee verwendet eine for await...of-Schleife, um diese Bestellungen zu iterieren und zu servieren, sobald sie verfügbar sind.

Einsatzgebiete in der realen Welt

Asynchrone Iteration ist besonders nützlich, wenn es um Datenströme geht oder wenn Sie große Mengen an Daten in Abschnitten verarbeiten müssen.

Lesen einer großen Datei

Stellen Sie sich vor, Sie müssen eine sehr große Datei Zeile für Zeile lesen:

const fs = require('fs').promises;

async function* readLines(file) {
const fileHandle = await fs.open(file, 'r');
const stream = fileHandle.createReadStream();
let buffer = '';

for await (const chunk of stream) {
buffer += chunk;
let lineEnd;
while ((lineEnd = buffer.indexOf('\n')) !== -1) {
yield buffer.slice(0, lineEnd);
buffer = buffer.slice(lineEnd + 1);
}
}

if (buffer.length > 0) {
yield buffer;
}

await fileHandle.close();
}

async function processFile() {
for await (const line of readLines('largefile.txt')) {
console.log(`Verarbeitung der Zeile: ${line}`);
}
}

processFile();

Dieses Beispiel zeigt, wie Sie asynchrone Iteration verwenden können, um eine große Datei Zeile für Zeile zu verarbeiten, ohne die gesamte Datei einmal in den Speicher zu laden.

Abrufen von paginierten API-Daten

Ein weiterer häufiger Einsatzfall ist das Abrufen von paginierten Daten von einer API:

async function* fetchPages(url) {
let nextUrl = url;
while (nextUrl) {
const response = await fetch(nextUrl);
const data = await response.json();
yield data.items;
nextUrl = data.next;
}
}

async function processAllPages() {
for await (const page of fetchPages('https://api.example.com/data')) {
for (const item of page) {
console.log(`Verarbeitung des Elements: ${item.name}`);
}
}
}

processAllPages();

Dieses Beispiel zeigt, wie Sie asynchrone Iteration verwenden können, um paginierte Daten von einer API abzurufen und zu verarbeiten, wobei jede Seite bei deren Empfang bearbeitet wird.

Schlussfolgerung

Asynchrone Iteration ist ein leistungsfähiges Werkzeug in JavaScript, das es uns ermöglicht, mit asynchronen Datenquellen auf eine saubere und intuitive Weise zu arbeiten. Es ist besonders nützlich, wenn es um Datenströme oder große Datensätze geht, die in Abschnitten verarbeitet werden müssen.

Denken Sie daran, der Schlüssel zum Beherrschen der asynchronen Iteration ist die Übung. Scheuen Sie sich nicht, diese Konzepte in Ihren eigenen Projekten auszuprobieren. Bevor Sie es wissen, werden Sie asynchrone Operationen wie ein wahrer JavaScript-Ninja behandeln!

Methode	Beschreibung
for await...of	Wird verwendet, um über asynchrone durchlaufbare Objekte zu iterieren
async function*	Definiert eine asynchrone Generatorfunktion
yield	Wird in Generatorfunktionen verwendet, um Werte zu definieren, die durchlaufen werden sollen
Promise.resolve()	Erstellt ein gelöstes Versprechen mit dem angegebenen Wert
async/await	Syntax zum Umgang mit Versprechen auf eine mehr synchrone Weise

Frohes Coden und möge Ihre asynchronen Operationen stets erfolgreich gelöst werden!

Credits: Image by storyset