Comment faire un appel rest post à partir du code ReactJS?

Directement à partir de la Réagir docs:

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

(c'est poster JSON, mais vous pouvez aussi faire, par exemple, multipart-form.)

React n'a pas vraiment d'opinion sur la façon dont vous faites des appels de repos. Fondamentalement, vous pouvez choisir n'importe quel type de bibliothèque AJAX que vous aimez pour cette tâche.

la façon la plus facile avec le Vieux JavaScript simple est probablement quelque chose comme ceci:

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

Dans les navigateurs modernes, vous pouvez également utiliser fetch .

si vous avez plus de composants qui font des appels de repos il pourrait être logique de mettre ce genre de logique dans une classe qui peut être utilisé dans les composants. Par exemple: RESTClient.post(…)

vous pouvez installer superagent

npm install superagent --save

puis pour faire un appel post au serveur

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

un autre paquet récemment populaire est: axios

Installation : npm install axios --save

Simple Promesse demandes

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

à partir de 2018 et au-delà, vous avez une option plus moderne qui est d'incorporer async/wait dans votre application ReactJS. Une bibliothèque de clients HTTP basée sur des promesses comme axios peut être utilisée. Le code de l'échantillon est le suivant:

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

Ici est la liste des bibliothèques ajax comparaison basée sur les fonctionnalités et de soutien. Je préfère utiliser fetch pour le développement côté client ou isomorphic-fetch pour l'utilisation dans le développement côté client et Côté Serveur.

Pour plus d'informations sur isomorphe-fetch vs chercher

voici un exemple: 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');
  });

il a utilisé la méthode jquery.ajax mais vous pouvez facilement la remplacer par des libs AJAX comme axios, superagent ou fetch.