CodeGym/Kurse/Frontend SELF DE/Asynchrone Funktionen

Asynchrone Funktionen

Verfügbar

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:

JavaScript
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:

JavaScript
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

JavaScript
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.

JavaScript
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.

JavaScript
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.

JavaScript
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.

JavaScript
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();
1
Aufgabe
Frontend SELF DE,  Level 43Lektion 3
Gesperrt
Verzögerungsfunktion
Verzögerungsfunktion
1
Aufgabe
Frontend SELF DE,  Level 43Lektion 3
Gesperrt
Parallele Aufgaben
Parallele Aufgaben
Kommentare
  • Beliebt
  • Neu
  • Alt
Du musst angemeldet sein, um einen Kommentar schreiben zu können
Auf dieser Seite gibt es noch keine Kommentare