ReactJS Requests – GET und POST Requests mit Typescript

Heute möchte ich den Axios Request Component vorstellen. Ich verwende diesen Component fast ausschließlich für das Ausführen von Requests.

ReactJS Requests

Einleitend möchte ich mich mit meiner Lieblingskomponente befassen, die ich für GET und POST Requests verwende. Natürlich ist das eine recht subjektive Meinung. Denn es gibt auch gute Alternativen und von ReactJS eigene Funktionen (die mir aber nicht so gefallen).

Unterschiedliche Verwendungsarten der Axios Funktionen

Anders als bei npmjs.com beschrieben, nutze ich die Axios Funktionen fast ausschließlich im Klassen-Kontext. Wie die Verwendung mit den Component-Tags funktioniert, könnt ihr auf der folgenden Seite nachlesen:
Link zum Package bei npmjs.com: Axios-Component auf npmjs.com

Aber nun zur Klassen-Einbindung. Für das Laden von Daten via Requests habe ich für mich einen eigenen „Best-Practice“ Weg gefunden. Zunächst erstelle ich mir einen so genannten DataManager Component. Dieser bindet die Axios-Klassen ein und führt auch über die axios Variable die Requests aus. Auf diesem Wege habe ich eine weitere Abstraktionsschicht vor dem externen Code und kann meine Klasse direkt an die Bedürfnisse meiner Applikation anpassen.

ReactJS Axios loadData
ReactJS Axios loadData Beispiel. Im axios Konfigurationsobjekt können weitere Parameter gesetzt werden, wie zum Beispiel die Request-Method oder weitere Header.

Da ich bei kleineren Applikationen die Direktive verfolge, die App.tsx als Haupt-Component und App-State-Holder zu stützen, gebe ich bei den Request-Aufträgen in meinem DataManager auch Callbacks mit rein. Somit kann die Main Klasse direkt reagieren, neue Daten in einer Liste anzeigen – oder im schlechteren Fall eine Fehlermeldung wenn etwas nicht geladen werden konnte. 

Wer sich die Doku von axios angesehen hat, wird sehen das es diese Funktionen dort bereits gibt. Ich halte mir mit meinem DataManager nur die Türe offen, die externe Komponente auch austauschen zu können.

Versionskonflikte bei ReactJS und Axios

Damit wären wir auch schon bei einem wichtigen Punkt angelangt: Wer ein aktuelles Projekt (ohne Versionsangaben) anlegt, der wird mit Sicherheit ReactJS >= 16.0.0 als Version installiert bekommen. Axios ist darauf allergisch, hätte gern etwas mit maximal Version 15.*. Braucht ein anderer Component allerdings etwas aktuelle(res), kommt die Abstraktionsschicht einem sehr zu pass – dann benötigt ihr eine andere Klasse für die Requests.

ReactJS Versionskonflikte
ReactJS Versionskonflikte bei der Installation

ReactJS POST/GET Requests mit Superagent

Eine Alternative für Requests ist die Verwendung von Superagent. Weiterführende Informationen und wie man die Komponente verwendet, gibt es unter npmjs.com : superagent.

ReactJS POST/GET Requests mit React-eigenen Funktionen

Die ReactJS-eigene Funktionalität liegt mir irgendwie nicht. Dennoch möchte ich sie hier einmal erwähnt haben und einen kurzen Screenshot zeigen, wie man damit eine JSON-Datei liest.

ReactJS fetch Funktion
ReactJS fetch Funktion (Man verzeihe mir die JSON-Datei Benennung mit users.json, wo wir hier doch Städte laden…)

Kommentar hinterlassen

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