06 – Fetch

Daten laden und senden mit fetch

Lernziele dieser Lektion

• Verstehen, was fetch ist und wie es funktioniert
• GET- und POST-Requests unterscheiden
• Header korrekt mitsenden
• Daten im Request-Body versenden
• Responses und Fehler sauber behandeln

Was ist fetch?

fetch ist eine moderne API für HTTP-Anfragen.

• arbeitet asynchron
• liefert immer ein Promise zurück
• ersetzt ältere APIs wie XMLHttpRequest

Grundaufbau von fetch

fetch(url, options)
    

• url: Ziel der Anfrage
• options: Konfiguration (optional)

Einfacher GET-Request

fetch("https://jsonplaceholder.typicode.com/posts")
    .then(response => response.json())
    .then(data => console.log(data));
    

Ohne Options-Objekt wird automatisch ein GET-Request gesendet.

GET mit async / await

async function loadPosts() {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts");
    const data = await response.json();
    console.log(data);
}
    

Was ist eine Response?

• Antwort des Servers
• enthält Statuscode (z. B. 200, 404)
• Daten müssen explizit gelesen werden

Status prüfen

if (!response.ok) {
    throw new Error("Fehler: " + response.status);
}
    

ok ist true bei Statuscodes 200–299.

Fetch mit Fehlerbehandlung

async function loadData() {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error("HTTP-Fehler");
        }
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}
    

HTTP-Methoden

POST-Request – Grundidee

POST wird verwendet, um neue Daten an einen Server zu senden.

Dazu werden Options benötigt.

POST mit fetch

fetch(url, {
    method: "POST"
});
    

Header mitsenden

fetch(url, {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    }
});
    

Header beschreiben, wie der Request interpretiert werden soll.

Request-Body senden

fetch(url, {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({
        title: "Neuer Eintrag",
        completed: false
    })
});
    

POST mit async / await

async function createTodo() {
    const response = await fetch(url, {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            title: "Mein Todo",
            completed: false
        })
    });

    const data = await response.json();
    console.log(data);
}
    

Typische Header

• Content-Type
• Authorization
• Accept

Warum Header wichtig sind

• Server weiss, wie Daten gelesen werden müssen
• Authentifizierung erfolgt oft über Header
• Falsche Header führen zu Fehlern

Zusammenfassung: Fetch-Optionen

fetch(url, {
    method: "POST",
    headers: { ... },
    body: JSON.stringify(data)
});
    

TL;DR

• fetch sendet HTTP-Anfragen
• GET lädt Daten, POST sendet Daten
• Header beschreiben den Request
• Body enthält die gesendeten Daten
• Fehler müssen explizit behandelt werden