Externe APIs nutzen
Daten von anderen Services in deiner App abrufen
⏱ ca. ~5 Min
01 · Lesen
Die meisten echten Apps existieren nicht isoliert. Sie sprechen mit anderen Services, um Daten zu bekommen: eine Wetter-App ruft eine Wetter-API auf, eine Social-App ruft eine Auth-API auf, eine E-Commerce-App ruft eine Payment-API auf.
Eine API (Application Programming Interface) ist einfach eine URL, die Daten statt einer Webseite zurückgibt. Wenn du eine Website besuchst, bekommt der Browser HTML. Wenn dein Programm eine API aufruft, bekommt es JSON — strukturierte Daten, die Programme verarbeiten können.
Du hast APIs in Level 5 gelernt. Jetzt nutzen wir sie in echtem Code.
💡 Stell dir das so vorWenn dein Server die Küche eines Restaurants ist, sind externe APIs die Lieferanten. Du baust nicht deine eigenen Tomaten an — du rufst einen Lieferanten an (die API), gibst eine Bestellung auf (Request), und er liefert (Response). Wenn der Lieferant geschlossen hat (die API ist down), brauchst du einen Plan B (Fehlerbehandlung).
02 · Code-Beispiel
Hier ist eine Route, die Daten von einer externen API abruft. Lies sie durch und achte auf drei Schlüsselmuster: async/await, fetch, try/catch.
Beispiel: API-Route
app.get('/api/joke', async (req, res) => {
try {
const response = await fetch('https://official-joke-api.appspot.com/random_joke');
const joke = await response.json();
res.json({
setup: joke.setup,
punchline: joke.punchline
});
} catch (error) {
res.status(500).json({ error: 'Failed to fetch joke' });
}
});
Achte auf drei Dinge: (1) async/await lässt dich auf externe Daten warten, ohne den Server einzufrieren. Das Schlüsselwort 'await' pausiert diese Funktion, bis die Daten ankommen, aber andere Requests werden weiter verarbeitet. (2) fetch sendet einen HTTP-Request an die externe API. (3) try/catch behandelt Fehler elegant — wenn die Witze-API down ist, gibt dein Server immer noch eine sinnvolle Fehlermeldung zurück statt abzustürzen.
03 · Lesen
Beim Arbeiten mit externen APIs tauchen ein paar Konzepte immer wieder auf. Wenn du diese verstehst, ersparst du dir typische Fehler.
Kernpunkte
- async/await — der Weg, auf externe Daten zu warten, ohne den Server zu blockieren
- API-Key — Authentifizierung für bezahlte oder private APIs (gehört in die .env!)
- Rate-Limit — APIs begrenzen, wie viele Requests du pro Minute senden darfst
- Fehlerbehandlung — immer einen Fallback haben, wenn die API down ist
04 · Echte Übung
Versuch, diese API-Route zu deinem Express-Server aus Level 7 hinzuzufügen. Sie ruft eine kostenlose Witze-API auf, die keinen API-Key braucht — ideal zum Üben.
// Add this to your app.js
app.get('/api/joke', async (req, res) => {
try {
const response = await fetch('https://official-joke-api.appspot.com/random_joke');
const joke = await response.json();
res.json({ setup: joke.setup, punchline: joke.punchline });
} catch (error) {
res.status(500).json({ error: 'Failed to fetch joke' });
}
});05 · Ausfüllen
Um API-Fehler in JavaScript zu behandeln, packst du den fetch-Aufruf in einen _____/catch-Block.
06 · Quiz
Warum sollten API-Aufrufe in einen try/catch-Block?
- JavaScript verlangt try/catch für alle Funktionen
- Damit der Code schneller läuft
- Um zu verhindern, dass die API zu oft aufgerufen wird
- Um Fehler elegant zu behandeln, wenn die API down ist
Andere Lektionen aus diesem Kapitel
⚠ Das volle interaktive Erlebnis braucht JavaScript. Bitte aktiviere es und lade die Seite neu.
※ Diese Seite ist ein unabhängiges Bildungsprojekt — kein offizielles Anthropic-Produkt. Claude™ ist eine eingetragene Marke von Anthropic, PBC.