JavaScript Fortgeschritten Tag 4: Asynchrone Grundlagen

Ziel dieses Tages

Heute wirst du lernen:

• Wie man asynchrones JavaScript wie ein Profi behandelt
• Promises und async/await
• Verwendung der Fetch API für HTTP-Anfragen
• Fehlerbehandlung in asynchronem Code
• Promise.all und Promise.race

Am Ende kannst du mehrere asynchrone Aufgaben effizient verwalten.

Schritt 1: Fetch mit async/await

Verwende async-Funktionen mit await, um API-Daten zu holen:

async function fetchData() {
  try {
    const res = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    const data = await res.json();
    console.log(data);
  } catch(err) {
    console.log("Fehler:", err);
  }
}

fetchData();

Schritt 2: Promise.all & Promise.race

Mehrere Promises parallel ausführen:

const p1 = fetch("https://jsonplaceholder.typicode.com/todos/1").then(r => r.json());
const p2 = fetch("https://jsonplaceholder.typicode.com/todos/2").then(r => r.json());
const p3 = fetch("https://jsonplaceholder.typicode.com/todos/3").then(r => r.json());

// Auf alle warten
Promise.all([p1, p2, p3]).then(results => console.log(results));

// Auf die schnellste Antwort warten
Promise.race([p1, p2, p3]).then(result => console.log(result));

Übung

async function fetchData() {
  try {
    const res = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    const data = await res.json();
    console.log(data);
  } catch(err) {
    console.log("Fehler:", err);
  }
}

fetchData();

Aufgabe

Löse folgende Aufgaben:

• Hole 3 APIs parallel und gib alle Ergebnisse aus
• Behandle Netzwerkfehler sicher

Beispiel:

async function fetchMultiple() {
  const urls = [
    "https://jsonplaceholder.typicode.com/todos/1",
    "https://jsonplaceholder.typicode.com/todos/2",
    "https://jsonplaceholder.typicode.com/todos/3"
  ];
  
  try {
    const promises = urls.map(url => fetch(url).then(r => r.json()));
    const results = await Promise.all(promises);
    console.log(results);
  } catch(err) {
    console.log("Netzwerkfehler:", err);
  }
}

fetchMultiple();