Ich bin neu in ReactJS und UI und wollte wissen, wie man einen einfachen REST-basierten POST-Aufruf aus ReactJS-Code ausführt.
Wenn es ein Beispiel gibt, wäre es wirklich hilfreich.
Ich bin neu in ReactJS und UI und wollte wissen, wie man einen einfachen REST-basierten POST-Aufruf aus ReactJS-Code ausführt.
Wenn es ein Beispiel gibt, wäre es wirklich hilfreich.
Antworten:
Direkt aus den React-Dokumenten :
(Dies ist das Posten von JSON, aber Sie können beispielsweise auch ein mehrteiliges Formular erstellen.)
quelle
fetch()
Funktion gibt die Daten nicht zurück , sondern nur ein Versprechen .fetch
, dass sie in React integriert ist, was nicht der Fall ist, und dass kein Link zu den Dokumenten vorhanden ist, auf die verwiesen wird.fetch
ist (zum Zeitpunkt des Schreibens) eine experimentelle Promise-basierte API . Für die Browserkompatibilität benötigen Sie eine Babel-Polyfüllung .React hat keine wirkliche Meinung darüber, wie Sie REST-Anrufe tätigen. Grundsätzlich können Sie für diese Aufgabe eine beliebige Art von AJAX-Bibliothek auswählen.
Der einfachste Weg mit einfachem altem JavaScript ist wahrscheinlich ungefähr so:
In modernen Browsern können Sie auch verwenden
fetch
.Wenn Sie mehr Komponenten haben, die REST-Aufrufe ausführen, ist es möglicherweise sinnvoll, diese Art von Logik in eine Klasse einzufügen, die für alle Komponenten verwendet werden kann. Z.B
RESTClient.post(…)
quelle
fetch
odersuperagent
oderjQuery
oderaxios
oder etwas anderes , das nicht Teil von „Vanille Reagieren“, um etwas anderes zu tun als das , was oben geschrieben ist .JSON.stringify({"key": "val"})
und dann auf der Kolbenseiterequest.get_json()
JSON.stringify
es zuerst tun .Ein weiteres kürzlich beliebtes Paket ist: Axios
Installieren :
npm install axios --save
Einfache Promise-basierte Anfragen
quelle
Sie können Superagent installieren
dann für einen Post-Call an den Server
quelle
Ab 2018 und darüber hinaus haben Sie eine modernere Option, die darin besteht, Async / Warten in Ihre ReactJS-Anwendung aufzunehmen. Eine vielversprechende HTTP-Client-Bibliothek wie Axios kann verwendet werden. Der Beispielcode ist unten angegeben:
quelle
await
-SyntaxError: await is a reserved word (33:19)
Ich denke so auch normal. Aber leider kann ich nicht auf Englisch beschreiben ((
https://googlechrome.github.io/samples/fetch-api/fetch-post.html
fetch ('url / question', {method: 'POST', headers: {Accept: 'application / json', 'Content-Type': 'application / json',}, body: JSON.stringify (this.state) }). then (response => {console.log (response)}) .catch (error => {console.log (error)})
quelle
Hier ist eine Liste der Ajax-Bibliotheksvergleiche, basierend auf den Funktionen und der Unterstützung. Ich bevorzuge Fetch nur für die clientseitige Entwicklung oder Isomorphic-Fetch für die clientseitige und serverseitige Entwicklung.
Weitere Informationen zu isomorphic-fetch vs fetch
quelle
Hier ist eine util-Funktion modifiziert (ein weiterer Beitrag auf dem Stapel), um beide zu erhalten und zu veröffentlichen. Erstellen Sie die Datei Util.js.
Verwendung wie unten in einer anderen Komponente
quelle
Hier ist ein Beispiel: https://jsfiddle.net/69z2wepo/9888/
Es wurde eine
jquery.ajax
Methode verwendet , aber Sie können sie leicht durch AJAX-basierte Bibliotheken wie Axios, Superagent oder Fetch ersetzen.quelle
'{"Id":"112","User":"xyz"}'
und ändern Sie die URL in localhost: 8080 / myapi / ui / start. Das ist alles. Sobald der XHR-Aufruf erfolgreich ist, landen Sie in der erledigten Methode und haben über das Ergebnis Zugriff auf Ihre Daten Eigentum.