Skip to main content

Die 4 wichtigsten Web-Requests schnell und einfach erklärt

Veröffentlicht am 12. Januar 2022

Beitrag teilen:

In der IT stößt man gelegentlich auf den Begriff „Request“. Aber was genau steckt hinter dem Begriff, wofür verwendet man es und was gibt es zu beachten?
Das alles erfährst du in diesem Beitrag.

Was ist eine Request?

Eine Request ist ein Aufruf einer bestimmten URL (API, Schnittstelle). Dieser Aufruf findet durch ein Programm statt, beispielsweise mittels fetch in JavaScript.
Dein Browser macht z.B. genau das, wenn du eine Website aufrufst: Er sendet eine GET-Abfrage ab, empfängt den Inhalt der Webseite und rendert ihn.
Diese Art der Abfragen nennt man auch AJAX.

Welche Request-Arten gibt es?

Requests können mit verschiedenen Methoden gemacht werden.

Ich werde hier beispielsweise mit meiner testapi verschiedene Anfragenausführen (JavaScript), um dir deren Funktionsweise zu verdeutlichen.
Weitere Infos erhältst du z.B. bei der offiziellen Übersicht von MDN.

GET

Bei GET erhält der Absender (JavaScript) Daten vom Server. GET sollte auch ausschließlich hierfür verwendet werden.

fetch('https://testapi.fabian-heinz-webdesign.de/simple-json-api/')
    .then(data => data.json())
    .then(console.log);

Bei dem Code wird eine Request an https://testapi.fabian-heinz-webdesign.de/simple-json-api/ geschickt, die empfangenen Daten werden zu JSON transformiert und dann über console.log ausgegeben.
Du kannst den API-Link gerne anklicken, dann siehst du was genau der Fetch von der API empfängt.
In diesem Fall wird ein Array zurückgeliefert, das  einzelne Objekte enthält:

[
    {"name":"Test1", "id": 1},
    {"name":"Test2", "id": 2},
    {"name":"Test3", "id": 3},
    {"name":"Test4", "id": 4},
    {"name":"Test5", "id": 5}
]

Ein anderer GET kann z.B. auch auf https://testapi.fabian-heinz-webdesign.de/simple-text-api/ abgesetzt werden, dort wird dann mit Texten gearbeitet.

GET kann allerdings auch einfachen Text, HTML, XML oder sonst alles mögliche zurückgeben.

POST

POST sendet ein einzelnes Objekt an den Server, welcher das Objekt weiter verarbeitet.
Hierzur benötigen wir ein Objekt, in diesem Fall in JSON, welches wir an den Server senden können:

var data = {
    id: 6,
    name: "Test6"
}

fetch("https://testapi.fabian-heinz-webdesign.de/simple-json-api/", { method: "POST", body: JSON.stringify(data) })
    .then(data => data.json())
    .then(console.log);

Hier wird dann ein POST an https://testapi.fabian-heinz-webdesign.de/simple-json-api/ gesendet und über den Parameter „body“ die Daten aus der Variable „data“ in einen String gecastet und übergeben.
Diesen Anfrage kannst du im Browser leider nicht durch anklicken feststellen, da ein normaler Aufruf nur GET unterstützt.
Wenn du die Anfrage dennoch testen möchtest, kannst du Postman installieren und dort eine POST-Anfrage absetzen.

Dort können dann, genauso wie bei GET, entsprechend Daten zur Weiterverarbeitung zurückgegeben werden, weshalb wir auch hier wieder die .then-Methoden ausführen.

DELETE

DELETE löscht, wie der Name schon sagt, das mitgesendete Objekt.

fetch("https://testapi.fabian-heinz-webdesign.de/simple-json-api/6", { method: "DELETE" })
   .then(data => data.json())
   .then(console.log);

Beim DELETE wird in der URL die ID des zu löschenden Objekts übergeben. Sofern dieses Objekt existiert, wird es dann gelöscht.

Theoretisch können auch hier wieder Daten zurück geliefert werden.

Allgemeine Hinweise

Arbeiten mit eindeutigen Identifikationen

Generell sollte man immer mit IDs arbeiten (z.B. für die Primärschlüssel in einer Datenbank), um ganz eindeutig Werte zuweisen zu können.

Fehlerbehandlung

Bei jeder Anfrage an externe Server können auch Fehler erzeugt werden. Hierbei muss man unterscheiden zwischen gewollten Fehlern und zwischen ungewollten Fehlern.
Gewollte Fehler werden von der API ausgelöst, z.B. 404 (Not found) oder auch 500 (Internal Error). Diese Fehler kannst du in .then() prüfen und entsprechend behandeln.
Ungewollte Fehler allerdings müsstest du mit der .catch()-Methode ausführen und dort entsprechend behandeln. Diese werden dann beispielsweise ausgeführt wenn ein CORS-Fehler auftritt oder die URL nicht im DNS auflöst.

Eine Auflistung aller StatusCodes bekommst du ebenfalls in der Liste von MDN.

Aktualisierung der Anzeige

Nachdem ein DELETE, PUT oder POST durchgeführt wurde, empfiehlt es sich die angezeigten Daten erneut über einen GET zu laden, damit dort auch der aktuelle Stand angezeigt wird.
Dazu ist es sinnvoll die GET-Anfrage und deren weitere Verarbeitung in eine Funktion zu verpacken, die dann einfach im .then()-Bereich der DELETE, PUT oder POST-Anfrage aufgerufen wird.

Ein Beitrag von

Fabian Heinz

Fabian Heinz

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert


Weitere Beiträge dieser Kategorie

Die 4 wichtigsten Web-Requests schnell und einfach erklärt

So schützt du deine Mails einfach mit SPF, DMARC und DKIM

E-Mails sind vermeintlich sicher. Zwar weiß jeder, dass es Spam-Mails gibt – aber dass der Absender gefälscht werden kann weiß kaum jemand. Hier widmen wir uns den Möglichkeiten, das so genannte „E-Mail-Spoofing“ zu verhindern und somit grundsätzlich die Mail-Sicherheit zu erhöhen.
Die 4 wichtigsten Web-Requests schnell und einfach erklärt

So erstellst du eine neue Menü-Position in deinem WordPress-Theme

Jedes WordPress-Theme hat bereits vordefinierte Menü-Positionen. Oft aber genügen die Positionen nicht; du möchtest an einer bestimmten Position ein eigenes Menü einbinden. Hier zeige ich dir, wie du ganz leicht eine neue Menü-Position in deinem WordPress-Theme erstellen kannst.
Wordpress-Logo

So erstellst du neue Widget-Bereiche in deinem WordPress-Theme

In jedem WordPress-Theme werden einige Widget-Bereiche mitgeliefert. In diesen Bereichen können alle möglichen Elemente angezeigt werden, ob Bilder, Texte oder Shop-Artikel. Hier erkläre ich dir, wie du ganz leicht eigene Widget-Bereiche anlegen kannst.
Font awesome lokal einbinden

Wie du mit nur 2 Zeilen Code FontAwesome lokal einbindest

Manchmal muss FontAwesome lokal eingebunden werden, dar die Einbindung der Icons über das Content-Delivery-Network (CDN) von FontAwesome nicht DSGVO-Konform ist – somit bleibt nichts anderes übrig als die Icons selbst auf dem Webspace lokal zu hosten. Im Folgenden erfährst  du, wie das ganz einfach mit kaum Aufwand super leicht umsetzen kannst.