🌐 Part 5 - HTTP-Methoden mit Fetch

💡 HTTP-Methoden sind Befehle für den Server:
GET = Daten abrufen
POST = Neue Daten erstellen
PUT = Alles ersetzen
PATCH = Teilweise ändern
DELETE = Löschen

📊 Die 5 wichtigsten HTTP-Methoden

GET 📖

Daten abrufen
Safe & Idempotent
Kein Body

POST ➕

Neu erstellen
Nicht Idempotent
Mit Body (Daten)

PUT 🔄

Alles ersetzen
Idempotent
Mit Body (alle Felder)

PATCH ✏️

Teilweise ändern
Idempotent
Mit Body (nur Änderungen)

DELETE 🗑️

Löschen
Idempotent
Kein Body

1️⃣ GET - Daten abrufen

Hole Daten vom Server (Standard fetch)

const response = await fetch('/api/posts/1');
const post = await response.json();
            

2️⃣ POST - Neue Daten erstellen

Sende neue Daten zum Server

const response = await fetch('/api/posts', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ title: "...", body: "..." })
});
            

3️⃣ PUT - Alles ersetzen

Ersetze eine komplette Ressource

const response = await fetch('/api/posts/1', {
  method: 'PUT',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    id: 1,
    title: "Neuer Title",
    body: "Neuer Body"
  })
});
            

4️⃣ PATCH - Teilweise ändern

Ändere nur einzelne Felder

const response = await fetch('/api/posts/1', {
  method: 'PATCH',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ title: "Nur Title ändern" })
});
            

5️⃣ DELETE - Löschen

Lösche eine Ressource

const response = await fetch('/api/posts/1', {
  method: 'DELETE'
});
            

🔄 CRUD Demo - Alle zusammen

Führe alle 4 CRUD-Operationen nacheinander durch

📋 Ausgabe:

Klick auf einen Button um zu starten...