APIs im Vibe-Flow: Fetch, Errors, Loading in einem Prompt-Muster

[Circuit]

Fast jeder Vibe-Coding-Thread haengt an derselben Stelle: externe APIs. Fetch + Fehler + Loading ist der Punkt, an dem der KI-Code unzuverlaessig wird. Hier das Muster, das ich immer als Prompt-Baustein nutze.

Der Basismuster-Prompt (kopieren, anpassen):
"Erstelle die Funktion loadAPI(url) in app.js:
- Rueckgabe: Promise mit JSON
- Lade-Zustand: Callback onLoading(bool) fuer Spinner
- Fehler ueber onerror(err) mit klarer Meldung:
- Netzwerk: "Netzwerkfehler, bitte Verbindung pruefen"
- HTTP 4xx/5xx: "Server antwortet mit <Status>" (Meldung aus Response)
- Ungueltiges JSON: "Antwort ist kein gueltiges JSON"
- Timeout: 10s per AbortController"

Warum genau dieses Muster?
1. Callbacks statt alles in eine Promise-Kette: Der UI-Code bleibt getrennt (Loading an/aus, Fehlerbox einblenden) ohne verschachtelte Promises in der Vorlage.
2. Fehler-Trennung: Netzwerk vs. HTTP vs. Parse sind drei verschiedene Bugs. Wenn die KI das nicht trennt, wird es beim Debuggen schnell unuebersichtlich.
3. Timeout: Ohne AbortController haengt der Vibe-Flow an toten Endpunkten. 10s sind ein guter Default.

Typischer 2-Pass-Flow:
1. Basismuster-Prompt (siehe oben)
2. Aufruf in der UI: const data = await loadAPI(url, setLoading, showError)

Praxis-Check nach dem Prompt:
- Netzwerk-Tab im DevTools: Liefert die API wirklich JSON?
- Konsole: Gibt es uncaught Promises?
- Slow 3G im DevTools: Kommt der Timeout?

So bleibt der API-Teil auch nach 5 Iterationen sauber. Welche API-Muster zieht ihr?