Wie mache ich einen Rest-Post-Anruf aus dem ReactJS-Code?

126

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.

Divya
quelle
6
Könnten Sie bitte die Antwort wählen, die Ihnen geholfen hat?
Sokrates

Antworten:

215

Direkt aus den React-Dokumenten :

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  })
})

(Dies ist das Posten von JSON, aber Sie können beispielsweise auch ein mehrteiliges Formular erstellen.)

Malvolio
quelle
4
Sie müssen es installieren und importieren . Vergessen Sie nicht, die fetch()Funktion gibt die Daten nicht zurück , sondern nur ein Versprechen .
Malvolio
1
haha @Divya, ich wollte gerade den gleichen Kommentar abgeben, bevor ich deinen las. Ich bin mir nicht sicher, ob ich es in React.createClass einfügen soll oder nicht. Könnten wir bitte auch einen Link zu den Reaktionsdokumenten haben? Ich habe erfolglos versucht, ihre Website ( facebook.github.io/react/docs/hello-world.html ) zu durchsuchen .
Tyler L
1
Können wir bitte die ursprüngliche Antwort ändern, um den Import einzuschließen?
Tyler L
5
IMO, @amann hat unten eine bessere Antwort . Diese Antwort impliziert 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. fetchist (zum Zeitpunkt des Schreibens) eine experimentelle Promise-basierte API . Für die Browserkompatibilität benötigen Sie eine Babel-Polyfüllung .
Chris
2
Beachten Sie, dass dies aus den React Native-Dokumenten stammt, nicht aus den React JS-Dokumenten. Sie können Fetch_API jedoch auch in React JS verwenden. facebook.github.io/react-native/docs/network.html
Pål Brattberg
23

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:

var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
request.send(data);

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.BRESTClient.post(…)

amann
quelle
5
Für mich ist dies die beste Antwort, weil reagiert nicht alles in gebaut hat. Sie haben entweder zu importieren fetchoder superagentoder jQueryoder axiosoder etwas anderes , das nicht Teil von „Vanille Reagieren“, um etwas anderes zu tun als das , was oben geschrieben ist .
Vapcguy
Es sieht so aus, als ob Sie eine Flasche verwenden, es funktioniert gut JSON.stringify({"key": "val"})und dann auf der Kolbenseiterequest.get_json()
Pro Q
Ja, wenn Sie JSON veröffentlichen, müssen Sie JSON.stringifyes zuerst tun .
Amann
19

Ein weiteres kürzlich beliebtes Paket ist: Axios

Installieren : npm install axios --save

Einfache Promise-basierte Anfragen


axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
Vivek Doshi
quelle
9

Sie können Superagent installieren

npm install superagent --save

dann für einen Post-Call an den Server

import request from "../../node_modules/superagent/superagent";

request
.post('http://localhost/userLogin')
.set('Content-Type', 'application/x-www-form-urlencoded')
.send({ username: "username", password: "password" })
.end(function(err, res){
console.log(res.text);
});  
Chandrakant Thakkar
quelle
5

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:

import axios from 'axios';
...
class Login extends Component {
    constructor(props, context) {
        super(props, context);
        this.onLogin = this.onLogin.bind(this);
        ...
    }
    async onLogin() {
        const { email, password } = this.state;
        try {
           const response = await axios.post('/login', { email, password });
           console.log(response);
        } catch (err) {
           ...
        }
    }
    ...
}
Kevin Le - Khnle
quelle
Aus irgendeinem Grund interpretiert Nodejs await-SyntaxError: await is a reserved word (33:19)
Prayagupd
@prayagupd Welche Version des Knotens verwenden Sie?
Kevin Le - Khnle
5

Ich denke so auch normal. Aber leider kann ich nicht auf Englisch beschreiben ((

    submitHandler = e => {
    e.preventDefault()
    console.log(this.state)
    fetch('http://localhost:5000/questions',{
        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)
        })
    
}

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)})

Herr Spaß
quelle
2

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

user3603575
quelle
0

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.

let cachedData = null;
let cachedPostData = null;

const postServiceData = (url, params) => {
    console.log('cache status' + cachedPostData );
    if (cachedPostData === null) {
        console.log('post-data: requesting data');
        return fetch(url, {
            method: 'POST',
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json',
            },
            body: JSON.stringify(params)
          })
        .then(response => {
            cachedPostData = response.json();
            return cachedPostData;
        });
    } else {
        console.log('post-data: returning cachedPostData data');
        return Promise.resolve(cachedPostData);
    }
}

const getServiceData = (url) => {
    console.log('cache status' + cachedData );
    if (cachedData === null) {
        console.log('get-data: requesting data');
        return fetch(url, {})
        .then(response => {
            cachedData = response.json();
            return cachedData;
        });
    } else {
        console.log('get-data: returning cached data');
        return Promise.resolve(cachedData);
    }
};

export  { getServiceData, postServiceData };

Verwendung wie unten in einer anderen Komponente

import { getServiceData, postServiceData } from './../Utils/Util';

constructor(props) {
    super(props)
    this.state = {
      datastore : []
    }
  }

componentDidMount = () => {  
    let posturl = 'yoururl'; 
    let getdataString = { name: "xys", date:"today"};  
    postServiceData(posturl, getdataString)
      .then(items => { 
        this.setState({ datastore: items }) 
      console.log(items);   
    });
  }
Shailesh Gavathe
quelle
-4

Hier ist ein Beispiel: https://jsfiddle.net/69z2wepo/9888/

$.ajax({
    type: 'POST',
    url: '/some/url',
    data: data
  })
  .done(function(result) {
    this.clearForm();
    this.setState({result:result});   
  }.bind(this)
  .fail(function(jqXhr) {
    console.log('failed to register');
  });

Es wurde eine jquery.ajaxMethode verwendet , aber Sie können sie leicht durch AJAX-basierte Bibliotheken wie Axios, Superagent oder Fetch ersetzen.

Sanyam Agrawal
quelle
Vielen Dank für das Beispiel :). Ich wollte auch verstehen, ob mein Dienst Daten im JSON-Format erwartet. Welche Änderungen wären dann erforderlich? Jede Art von Information wäre wirklich hilfreich. Wenn ich also den Befehl curl verwende, um den Endpunkt zu erreichen, ist es wie curl -v -X POST localhost: 8080 / myapi / ui / start -d '{"Id": "112", "User": "xyz"}' Wie kann ich einen solchen Dienst anrufen?
Divya
Erstellen Sie eine Variable namens data mit '{"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.
Sanyam Agrawal