Integration von APIs in JavaScript-Anwendungen
Bei der Arbeit mit APIs sind die gebräuchlichsten 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.
GET-Anfrage-Beispiel
Eine GET-Anfrage ruft Daten von einem Server ab, ohne Ressourcen zu verändern.
index.html
index.js
Die Funktion fetchPost verwendet die Methode fetch(), um eine Anfrage an einen bestimmten Endpunkt (/posts/1) zu senden. Nach Erhalt der Antwort werden die Daten als JSON geparst und der Titel des Beitrags extrahiert und im HTML-Absatz angezeigt.
Beispiel für eine POST-Anfrage
Eine POST-Anfrage sendet Daten an den Server und wird häufig zum Erstellen neuer Ressourcen oder zum Übermitteln von Formulardaten verwendet.
index.html
index.js
Die Funktion sendPostRequest sendet eine Anfrage an den angegebenen Endpunkt (/posts) mit der method auf 'POST' gesetzt. Die Header beinhalten 'Content-Type': 'application/json', um anzugeben, 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 gehören zu den gängigen Methoden:
- PUT: Wird verwendet, um eine bestehende Ressource zu aktualisieren;
- DELETE: Wird verwendet, um eine Ressource vom Server zu entfernen.
Mit jeder HTTP-Methode können auch Header gesendet werden, um zusätzliche Informationen wie Authentifizierungstoken oder Content-Type bereitzustellen.
Beispiel für eine PUT-Anfrage: Aktualisierung von Daten
index.html
index.js
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 Aktualisierung anzugeben, und die headers sind so gesetzt, dass sie 'Content-Type': 'application/json' enthalten, was auf das JSON-Format hinweist. Der body enthält JSON-formatierte Daten, einschließlich einer id, einem aktualisierten title, body und userId. Nach Erhalt der Antwort wird diese als JSON geparst und der aktualisierte Titel im HTML angezeigt.
DELETE-Anfragebeispiel: Entfernen von Daten
index.html
index.js
Die Funktion deletePost sendet eine DELETE-Anfrage an einen angegebenen Endpunkt (/posts/1), um einen bestimmten Beitrag zu löschen. Die Angabe method: 'DELETE' definiert die Aktion. Nach der Anfrage wird der Antwortstatus mit response.ok überprüft: Bei Erfolg wird eine Erfolgsnachricht ("Post deleted successfully.") im HTML angezeigt. Im Fehlerfall erscheint stattdessen eine Fehlermeldung.
Verwendung von Query-Parametern in API-Anfragen
Query-Parameter ermöglichen das Übermitteln zusätzlicher Informationen in der URL, beispielsweise zum Filtern von Daten, Sortieren von Ergebnissen oder zur Angabe von Seitenzahlen bei paginierten Antworten.
GET-Anfrage mit Query-Parametern
index.html
index.js
Die Funktion fetchPostsByUser sendet eine Anfrage an einen API-Endpunkt mit einem Query-Parameter (userId=1), der die Beiträge auf diejenigen des angegebenen Benutzers filtert. Die userId wird direkt als Query-Parameter an die URL angehängt. Nach dem Empfang der gefilterten Daten zeigt die Funktion die Anzahl der für diesen Benutzer gefundenen Beiträge im HTML an.
1. Welches HTTP-Verfahren würden Sie verwenden, um Daten von einem Server abzurufen, ohne Ressourcen zu verändern?
2. Welche der folgenden Optionen bestätigt eine erfolgreiche DELETE-Anfrage?
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Can you explain the difference between GET and POST requests in more detail?
How do I use headers with different HTTP methods?
Can you provide examples of using query parameters in API requests?
Awesome!
Completion rate improved to 2.22Integration von APIs in JavaScript-Anwendungen
Swipe um das Menü anzuzeigen
Bei der Arbeit mit APIs sind die gebräuchlichsten 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.
GET-Anfrage-Beispiel
Eine GET-Anfrage ruft Daten von einem Server ab, ohne Ressourcen zu verändern.
index.html
index.js
Die Funktion fetchPost verwendet die Methode fetch(), um eine Anfrage an einen bestimmten Endpunkt (/posts/1) zu senden. Nach Erhalt der Antwort werden die Daten als JSON geparst und der Titel des Beitrags extrahiert und im HTML-Absatz angezeigt.
Beispiel für eine POST-Anfrage
Eine POST-Anfrage sendet Daten an den Server und wird häufig zum Erstellen neuer Ressourcen oder zum Übermitteln von Formulardaten verwendet.
index.html
index.js
Die Funktion sendPostRequest sendet eine Anfrage an den angegebenen Endpunkt (/posts) mit der method auf 'POST' gesetzt. Die Header beinhalten 'Content-Type': 'application/json', um anzugeben, 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 gehören zu den gängigen Methoden:
- PUT: Wird verwendet, um eine bestehende Ressource zu aktualisieren;
- DELETE: Wird verwendet, um eine Ressource vom Server zu entfernen.
Mit jeder HTTP-Methode können auch Header gesendet werden, um zusätzliche Informationen wie Authentifizierungstoken oder Content-Type bereitzustellen.
Beispiel für eine PUT-Anfrage: Aktualisierung von Daten
index.html
index.js
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 Aktualisierung anzugeben, und die headers sind so gesetzt, dass sie 'Content-Type': 'application/json' enthalten, was auf das JSON-Format hinweist. Der body enthält JSON-formatierte Daten, einschließlich einer id, einem aktualisierten title, body und userId. Nach Erhalt der Antwort wird diese als JSON geparst und der aktualisierte Titel im HTML angezeigt.
DELETE-Anfragebeispiel: Entfernen von Daten
index.html
index.js
Die Funktion deletePost sendet eine DELETE-Anfrage an einen angegebenen Endpunkt (/posts/1), um einen bestimmten Beitrag zu löschen. Die Angabe method: 'DELETE' definiert die Aktion. Nach der Anfrage wird der Antwortstatus mit response.ok überprüft: Bei Erfolg wird eine Erfolgsnachricht ("Post deleted successfully.") im HTML angezeigt. Im Fehlerfall erscheint stattdessen eine Fehlermeldung.
Verwendung von Query-Parametern in API-Anfragen
Query-Parameter ermöglichen das Übermitteln zusätzlicher Informationen in der URL, beispielsweise zum Filtern von Daten, Sortieren von Ergebnissen oder zur Angabe von Seitenzahlen bei paginierten Antworten.
GET-Anfrage mit Query-Parametern
index.html
index.js
Die Funktion fetchPostsByUser sendet eine Anfrage an einen API-Endpunkt mit einem Query-Parameter (userId=1), der die Beiträge auf diejenigen des angegebenen Benutzers filtert. Die userId wird direkt als Query-Parameter an die URL angehängt. Nach dem Empfang der gefilterten Daten zeigt die Funktion die Anzahl der für diesen Benutzer gefundenen Beiträge im HTML an.
1. Welches HTTP-Verfahren würden Sie verwenden, um Daten von einem Server abzurufen, ohne Ressourcen zu verändern?
2. Welche der folgenden Optionen bestätigt eine erfolgreiche DELETE-Anfrage?
Danke für Ihr Feedback!
