Praktische API-Integration

Beim Arbeiten mit APIs sind die häufigsten HTTP-Methoden GET und POST:

• GET: Wird verwendet, um Daten von einem Server abzurufen;
• POST: Wird verwendet, um Daten an einen Server zu senden, typischerweise beim Absenden von Formularen oder beim Senden von JSON-Daten.

Beispiel für eine GET-Anfrage

Eine GET-Anfrage ruft Daten von einem Server ab, ohne Ressourcen zu verändern.

Die Funktion fetchPost verwendet die Methode fetch(), um eine Anfrage an einen angegebenen Endpunkt (/posts/1) zu senden. Sobald die Antwort empfangen wird, werden die Daten als JSON geparst, und der Beitragstitel wird extrahiert und im HTML-Absatz angezeigt.

Beispiel für eine POST-Anfrage

Eine POST-Anfrage sendet Daten an den Server, die häufig zum Erstellen neuer Ressourcen oder zum Übermitteln von Formulardaten verwendet wird.

Die Funktion sendPostRequest sendet eine Anfrage an den angegebenen Endpunkt (/posts) mit der method auf 'POST' gesetzt. Die Header enthalten 'Content-Type': 'application/json', um anzuzeigen, dass JSON-Daten gesendet werden. Der body enthält JSON-formatierte Daten mit Details für einen neuen Beitrag, wie title, body und userId. Nach der Anfrage wird die Serverantwort als JSON geparst und der Titel des erstellten Beitrags im HTML angezeigt.

Senden von Headern und Umgang mit verschiedenen HTTP-Methoden (GET, POST, PUT, DELETE)

Verschiedene HTTP-Methoden dienen unterschiedlichen Zwecken. Neben GET und POST sind gängige Methoden:

• PUT: Wird verwendet, um eine vorhandene Ressource zu aktualisieren;
• DELETE: Wird verwendet, um eine Ressource vom Server zu entfernen.

Sie können auch Header mit jeder HTTP-Methode senden, um zusätzliche Informationen bereitzustellen, wie z.B. Authentifizierungstoken oder Inhaltstyp.

PUT-Anfrage Beispiel: Daten aktualisieren

Die Funktion updatePost sendet eine PUT-Anfrage an den angegebenen Endpunkt (/posts/1), um einen bestehenden Beitrag zu aktualisieren. Die Anfrage enthält method: 'PUT', um die Aktualisierungsaktion anzugeben, und die headers sind so eingestellt, dass sie 'Content-Type': 'application/json' enthalten, was das JSON-Format angibt. Der body enthält JSON-formatierte Daten, einschließlich einer id, einem aktualisierten title, body und userId. Sobald die Antwort empfangen wird, wird sie als JSON geparst und der aktualisierte Titel wird im HTML angezeigt.

DELETE-Anfragebeispiel: Entfernen von Daten

Die Funktion deletePost sendet eine DELETE-Anfrage an einen angegebenen Endpunkt (/posts/1), um einen bestimmten Beitrag zu löschen. Die Angabe method: 'DELETE' spezifiziert die Aktion. Nach der Anfrage wird der Antwortstatus mit response.ok überprüft: Wenn erfolgreich, wird eine Erfolgsmeldung ("Post erfolgreich gelöscht.") im HTML angezeigt. Wenn das Löschen fehlschlägt, erscheint stattdessen eine Fehlermeldung.

Verwendung von Abfrageparametern in API-Anfragen

Abfrageparameter ermöglichen es Ihnen, zusätzliche Informationen in der URL zu senden, wie z.B. das Filtern von Daten, das Sortieren von Ergebnissen oder das Angeben von Seitennummern in paginierten Antworten.

GET-Anfrage mit Abfrageparametern

Die Funktion fetchPostsByUser sendet eine Anfrage an einen API-Endpunkt mit einem Abfrageparameter (userId=1), der die Beiträge nur auf diejenigen des angegebenen Benutzers filtert. Die userId wird direkt als Abfrageparameter zur URL hinzugefügt. Nach dem Empfang der gefilterten Daten zeigt die Funktion die Anzahl der Beiträge an, die für diesen Benutzer gefunden wurden, im HTML an.