Wie mache ich einen Rest Post Call von ReactJS Code?

Question

Ich bin neu auf reactJS und UI und ich wollte wissen, wie man einen einfachen Rest-basierten POST-Aufruf von reactJS Code.

Wenn ein Beispiel vorhanden ist, wäre es sehr hilfreich.

Danke. Hier

Answer 1

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 verwendete jquery.ajax Methode, aber man kann es leicht mit AJAX-basierten Libs wie axios, Superagent oder holen ersetzen.

Answer 2

direkt aus dem Reagieren docs:

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

(Dies ist JSON Posting, aber man könnte auch tun, zum Beispiel, mehrt-Form.)

Answer 3

reagieren nicht wirklich eine Meinung über wie Sie REST-Anrufe tätigen. Grundsätzlich können Sie für diese Aufgabe eine beliebige AJAX-Bibliothek auswählen.

Der einfachste Weg, mit plain old JavaScript ist wahrscheinlich so etwas wie folgen aus:

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 auch fetch verwenden kannst.

Wenn Sie mehr Komponenten haben, die REST-Aufrufe ausführen, kann es sinnvoll sein, diese Art von Logik in eine Klasse zu integrieren, die für alle Komponenten verwendet werden kann. Z.B. RESTClient.post(…)

Answer 4

Here ist die Liste von Ajax-Vergleichsbibliotheken basierend auf den Funktionen und Unterstützung. Ich bevorzuge fetch für nur Client-Seite Entwicklung oder isomorphic-fetch für die Verwendung in Client-Seite und Server-Seite Entwicklung.

Weitere Informationen über isomorphic-fetch vs fetch

Answer 5

können Sie Superagent installieren

npm install superagent --save 

dann für Make Post Aufruf 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); 
}); 

Answer 6

Weitere kürzlich beliebte Pakete ist: axios

installieren : npm install axios --save

Einfache Versprechen basierte Anfragen

---

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

Answer 7

Ab 2018 und darüber hinaus haben Sie eine modernere Option, die async/await in Ihrer ReactJS Anwendung zu integrieren ist. Eine Versprechen-basierte 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) { 
      ... 
     } 
    } 
    ... 
}