4.1 Schlüsselwort async
Asynchrone Funktionen in JavaScript erlauben es, asynchronen Code zu schreiben, der aussieht und gelesen wird wie synchroner Code. Die Schlüsselwörter async und await, eingeführt in ECMAScript 2017 (ES8), erleichtern den Umgang mit Promises und machen den Code verständlicher und verwaltbarer.
Grundlegende Konzepte
Das Schlüsselwort async vor der Funktionsdeklaration zeigt an, dass die Funktion asynchron ist. Eine asynchrone Funktion gibt immer ein Promise zurück, selbst wenn darin kein explizites return angegeben ist. Wenn die Funktion einen Wert zurückgibt, wird dieser automatisch in ein Promise mit diesem Wert gepackt.
Syntax:
async function name() {
// Funktionscode
}
Beispiel:
async function greet() {
return 'Hello, world!';
}
greet().then((message) => {
console.log(message); // Gibt aus: Hello, world!
});
4.2 Schlüsselwort await
Das Schlüsselwort await wird innerhalb einer asynchronen Funktion verwendet, um deren Ausführung zu pausieren, bis das Promise erfüllt ist. await kann nur innerhalb von Funktionen verwendet werden, die mit dem Schlüsselwort async deklariert wurden.
Syntax:
let result = await
promise;
Beispiel:
function delay(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
async function greet() {
await delay(2000);
return 'Hello, world!';
}
async function displayGreeting() {
const message = await greet();
console.log(message); // Gibt aus: Hello, world! nach 2 Sekunden
}
displayGreeting();
4.3 Beispiele zur Verwendung von async und await
Beispiel 1: Asynchrone Funktion mit Warten auf mehrere Promises
function fetchData1() {
return new Promise((resolve) => setTimeout(() => resolve('Data 1'), 1000));
}
function fetchData2() {
return new Promise((resolve) => setTimeout(() => resolve('Data 2'), 2000));
}
async function fetchAllData() {
const data1 = await fetchData1();
console.log(data1); // Gibt aus: Data 1 nach 1 Sekunde
const data2 = await fetchData2();
console.log(data2); // Gibt aus: Data 2 nach 2 Sekunden
}
fetchAllData();
Beispiel 2: Parallele Ausführung asynchroner Operationen
Um mehrere asynchrone Operationen parallel auszuführen, kann man Promise.all() mit await verwenden.
function fetchData1() {
return new Promise((resolve) => setTimeout(() => resolve('Data 1'), 1000));
}
function fetchData2() {
return new Promise((resolve) => setTimeout(() => resolve('Data 2'), 2000));
}
async function fetchAllData() {
const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
console.log(data1); // Gibt aus: Data 1 nach 2 Sekunden
console.log(data2); // Gibt aus: Data 2 nach 2 Sekunden
}
fetchAllData();
Beispiel 3: Fehlerbehandlung mit try...catch
Asynchrone Funktionen erlauben es, try...catch Blöcke zur Fehlerbehandlung zu verwenden, was den Code lesbarer und verwaltbarer macht.
function fetchDataWithError() {
return new Promise((resolve, reject) => setTimeout(() => reject('Error occurred'), 1000));
}
async function fetchData() {
try {
const data = await fetchDataWithError();
console.log(data);
} catch (error) {
console.error('Error:', error); // Gibt aus: Error: Error occurred nach 1 Sekunde
}
}
fetchData();
Beispiel 4: Verwendung von async und await in Klassenmethoden
Asynchrone Funktionen können auch in Methoden von Klassen verwendet werden.
class DataFetcher {
async fetchData() {
const data = await new Promise((resolve) => setTimeout(() => resolve('Fetched Data'), 1000));
return data;
}
}
const fetcher = new DataFetcher();
fetcher.fetchData().then((data) => {
console.log(data); // Gibt aus: Fetched Data nach 1 Sekunde
});
Beispiel 5: Asynchrone Iteratoren
Asynchrone Iteratoren erlauben es, mit Datenströmen umzugehen, die asynchron eintreffen.
async function* asyncGenerator() {
let i = 0;
while (i < 3) {
await new Promise((resolve) => setTimeout(resolve, 1000));
yield i++;
}
}
async function iterateAsyncGenerator() {
for await (let value of asyncGenerator()) {
console.log(value); // Gibt 0, 1 und 2 im Abstand von 1 Sekunde aus
}
}
iterateAsyncGenerator();
GO TO FULL VERSION