aktuelle webdesign-artikel

12 Jan 2022
Erklärung von Requests

Die 4 wichtigsten Requests einfach erklärt

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-Typen 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(elements=> {
        console.log(elements);
    }
);

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(elements => {
        console.log(elements);
    }
);

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 Anfragekannst 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.

PUT

PUT sendet ebenfalls ein Objekt an den Server, dieser ersetzt jedoch ein bereits existierendes Objekt mit dem Gesendeten.

var data = {
     name: "Test7" 
}

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

Beim PUT ist es eine Kombination aus GET und POST – es wird in der URL eine ID übergeben, der überschrieben werden soll (hier 1).
Zusätzlich werden die in einen String umgewandelten Daten aus der Variable „data“ an den Server gesendet. Dieser ändert dann den Eintrag mit dem Namen „Test1“ ab in „Test7“.

Auch hier 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")
   .then(data => data.json())
   .then(elements=> {
         console.log(elements);
     }
 );

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.

Fabian Heinz

Fabian Heinz

Fabian Heinz beschäftigt sich seit mehreren Jahren mit Webdesign. Zuerst war es nur ein Hobby – jetzt ist es sein Beruf. Als staatlich geprüfter Wirtschaftsinformatiker kennt er sämtliche Zusammenhänge der Technik und überzeugt durch sowohl Theorie- als auch Praxiswissen. Mit viel Leidenschaft ist er bei der Arbeit und zeigt, dass der Beruf auch seine Berufung ist.

Schreibe einen Kommentar