Wie man APIs findet und nutzt

Veröffentlicht am 22. Januar 2026

APIs (Application Programming Interfaces) sind das Rückgrat moderner Webanwendungen. In diesem Tutorial zeige ich dir, wie du die richtigen APIs findest und sie effektiv in deinem Projekt nutzt.

1. Wo findet man APIs?

API-Verzeichnisse

Es gibt mehrere Plattformen, die APIs katalogisieren:

RapidAPI - Größter API-Marktplatz mit Tausenden von APIs
Postman API Network - Hochwertige APIs mit guter Dokumentation
Public APIs GitHub - Liste kostenloser öffentlicher APIs
API List - Kuratierte Liste von APIs

Direkt bei Anbietern

Viele Services bieten eigene APIs an. Suche nach "Service-Name API":

Google Maps API - Kartendienste
OpenWeatherMap API - Wetterdaten
Stripe API - Zahlungsabwicklung
Twilio API - SMS und Telefonie
SendGrid API - E-Mail-Versand

2. API-Dokumentation verstehen

Eine gute API-Dokumentation sollte folgende Informationen enthalten:

Authentifizierung

Wie authentifiziere ich mich? (API Key, OAuth, JWT, etc.)

Endpoints

Welche URLs sind verfügbar und was machen sie?

Request-Format

Welche Parameter brauche ich? In welchem Format (JSON, Form Data, etc.)?

Response-Format

Was bekomme ich zurück? Wie sieht die Datenstruktur aus?

Rate Limits

Wie viele Requests kann ich pro Zeiteinheit machen?

3. Erste API-Anfrage mit Fetch

Die Fetch API ist der Standard-Weg für HTTP-Requests in JavaScript:

// Einfache GET-Anfrage
const response = await fetch('https://api.example.com/users')
const data = await response.json()
console.log(data)

// Mit Error Handling
try {
  const response = await fetch('https://api.example.com/users')
  
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`)
  }
  
  const data = await response.json()
  console.log(data)
} catch (error) {
  console.error('Fehler beim Laden der Daten:', error)
}

4. API mit Authentifizierung

API Key Authentication

const API_KEY = 'dein-api-key'

const response = await fetch('https://api.example.com/data', {
  headers: {
    'Authorization': `Bearer ${API_KEY}`,
    'Content-Type': 'application/json'
  }
})

const data = await response.json()

POST-Request mit Daten

const response = await fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${API_KEY}`
  },
  body: JSON.stringify({
    name: 'Max Mustermann',
    email: 'max@example.com'
  })
})

const result = await response.json()
console.log('User erstellt:', result)

5. API in Nuxt nutzen

Nuxt bietet spezielle Composables für API-Calls:

Client-seitig mit useFetch

<script setup>
// Automatisches Caching und Error Handling
const { data, pending, error, refresh } = await useFetch(
  'https://api.example.com/users',
  {
    headers: {
      'Authorization': `Bearer ${API_KEY}`
    }
  }
)
</script>

<template>
  <div>
    <div v-if='pending'>Lädt...</div>
    <div v-else-if='error'>Fehler: {{ error.message }}</div>
    <div v-else>
      <div v-for='user in data' :key='user.id'>
        {{ user.name }}
      </div>
    </div>
  </div>
</template>

Server-seitig über API Routes

// server/api/users.ts
export default defineEventHandler(async (event) => {
  const API_KEY = process.env.API_KEY
  
  const response = await fetch('https://api.example.com/users', {
    headers: {
      'Authorization': `Bearer ${API_KEY}`
    }
  })
  
  const data = await response.json()
  return data
})

// In Komponente nutzen:
const { data } = await useFetch('/api/users')

6. API-Keys sicher speichern

API-Keys sollten NIEMALS im Frontend-Code stehen!

// .env Datei (nicht in Git committen!)
API_KEY=dein-geheimer-api-key
NUXT_PUBLIC_API_URL=https://api.example.com

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    // Private (nur Server)
    apiKey: process.env.API_KEY,
    
    // Public (auch Client)
    public: {
      apiUrl: process.env.NUXT_PUBLIC_API_URL
    }
  }
})

// In Server API Route nutzen:
const config = useRuntimeConfig()
const apiKey = config.apiKey

7. Praktisches Beispiel: Wetter-API

// composables/useWeather.ts
export const useWeather = () => {
  const getWeather = async (city: string) => {
    const { data, error } = await useFetch('/api/weather', {
      query: { city }
    })
    
    return { data, error }
  }
  
  return { getWeather }
}

// server/api/weather.ts
export default defineEventHandler(async (event) => {
  const config = useRuntimeConfig()
  const query = getQuery(event)
  const city = query.city
  
  const response = await fetch(
    `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${config.apiKey}&units=metric`
  )
  
  const data = await response.json()
  
  return {
    temperature: data.main.temp,
    description: data.weather[0].description,
    humidity: data.main.humidity
  }
})

// In Komponente:
<script setup>
const { getWeather } = useWeather()
const city = ref('Berlin')
const weather = ref(null)

const loadWeather = async () => {
  const { data } = await getWeather(city.value)
  weather.value = data.value
}
</script>

Best Practices

Immer Error Handling

APIs können fehlschlagen. Behandle Fehler immer graceful und zeige dem User hilfreiche Fehlermeldungen.

Caching nutzen

Vermeide unnötige API-Calls durch intelligentes Caching. Nuxt's useFetch macht das automatisch.

Rate Limits beachten

Achte auf die Rate Limits der API. Implementiere Retry-Logik und Backoff-Strategien.

Daten transformieren

APIs liefern oft mehr Daten als nötig. Transformiere die Daten auf dem Server, bevor du sie ans Frontend schickst.

Fazit

APIs sind essentiell für moderne Webanwendungen. Mit den richtigen Tools und Best Practices kannst du APIs effektiv in dein Projekt integrieren. Nuxt macht es besonders einfach, APIs sicher und performant zu nutzen, indem es Server-seitige API-Routes und intelligentes Caching bietet.