JavaScript Academy · Lektion

GET-Anfragen stellen

Rufen Sie Daten ab und analysieren Sie JSON-Antworten.

GET-Anfragen stellen ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was fetch macht

Die Fetch API stellt im Browser HTTP-Anfragen und gibt ein Promise zurück. Sie ist der moderne Ersatz für das ältere XMLHttpRequest.

Ein einfacher GET-Aufruf

Rufen Sie fetch(url) mit einer URL auf. Standardmäßig wird die GET-Methode verwendet, und der Aufruf wird mit einem Response-Objekt erfüllt.

fetch("https://api.example.com/users")
  .then((response) => {
    console.log(response.status); // 200
  });

Das Response-Objekt

Der erfüllte Wert ist eine Response, nicht die Daten selbst. Er enthält Status, Header und Methoden zum Lesen des Bodys. Sie müssen eine Body-Methode aufrufen, um den Inhalt zu erhalten.

fetch(url).then((response) => {
  console.log(response.ok);     // true if status 200-299
  console.log(response.status); // 200
});

JSON analysieren

Die meisten APIs liefern JSON. Rufen Sie response.json() auf. Diese Methode gibt selbst ein Promise zurück, das mit dem analysierten Objekt erfüllt wird.

fetch(url)
  .then((response) => response.json())
  .then((data) => {
    console.log(data); // parsed JS object/array
  });

Warum es zwei Promises gibt

Das erste Promise wird erfüllt, sobald die Header eingetroffen sind; das zweite (.json()) wird erfüllt, sobald der vollständige Body heruntergeladen und analysiert wurde. Deshalb verketten Sie zwei Aufrufe von .then().

async/await verwenden

Der meiste Code verwendet aus Gründen der Lesbarkeit async/await. Jedes await wartet, bis sein Promise erfüllt wird.

async function getUsers() {
  const response = await fetch(url);
  const data = await response.json();
  return data;
}

Andere Body-Leser

Neben json() kann eine Response als text(), blob() (binär), arrayBuffer() oder formData() gelesen werden. Wählen Sie die Methode passend zu dem, was der Server zurückgibt.

const response = await fetch(url);
const html = await response.text(); // raw string

Der Body wird nur einmal gelesen

Der Body einer Response ist ein Stream, den Sie nur einmal verbrauchen können. Wenn Sie bei derselben Response zuerst json() und dann text() aufrufen, wird ein Fehler ausgelöst. Klonen Sie die Response mit response.clone(), wenn Sie tatsächlich beide Varianten benötigen.

Query-Parameter

Erstellen Sie Query-Strings sicher mit URLSearchParams, statt sie manuell zu verketten. Die Klasse kodiert Sonderzeichen für Sie.

const params = new URLSearchParams({ page: 2, q: "hello world" });
fetch("https://api.example.com/search?" + params);

Header senden

Übergeben Sie als zweites Argument ein Optionsobjekt. Bei GET setzen Sie häufig einen Accept-Header oder ein Authentifizierungstoken.

fetch(url, {
  headers: {
    "Accept": "application/json",
    "Authorization": "Bearer " + token
  }
});

Das Promise zurückgeben

Kapseln Sie die Fetch-Logik in eine Funktion, die das Promise zurückgibt, damit aufrufender Code darauf warten kann. So bleibt das Laden von Daten in Ihrer App wiederverwendbar.

function loadUser(id) {
  return fetch("/api/users/" + id).then((r) => r.json());
}

Schnelltest

GET-Anfragen mit fetch.

Zusammenfassung

fetch(url) gibt ein Promise für eine Response zurück. Lesen Sie den Body mit json(), text() oder blob() aus, und zwar nur einmal. Verwenden Sie async/await für übersichtlichen Code, URLSearchParams für Query-Strings und ein Optionsobjekt für Header. Kapseln Sie die Logik in Funktionen, die das Promise zur Wiederverwendung zurückgeben.

Häufig gestellte Fragen

Ist die Lektion „GET-Anfragen stellen“ kostenlos?

Ja — der vollständige Text von „GET-Anfragen stellen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „GET-Anfragen stellen“?

Rufen Sie Daten ab und analysieren Sie JSON-Antworten. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „GET-Anfragen stellen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy