Comment faire un repos post-appel de ReactJS code?

Question

Je suis nouveau sur reactJS et de l'INTERFACE utilisateur et je voulais savoir comment faire un simple rest POST appel de reactJS code.

Si il n'y a aucun exemple présent, il serait vraiment utile.

Merci.

Answer 1

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 l'affichage JSON, mais vous pouvez également le faire, par exemple, multipart-forme).

Answer 2

Réagir n'a pas vraiment d'avoir une opinion sur la façon dont vous faites des appels de REPOS. Fondamentalement, vous pouvez choisir quel que soit le type de bibliothèque AJAX-vous pour cette tâche.

La façon la plus simple avec un bon vieux JavaScript 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 d'éléments qui font des appels de REPOS, il pourrait être judicieux de mettre ce genre de logique dans une classe qui peut être utilisé dans les composants. E. g. RESTClient.post(…)

Answer 3

Un autre récemment populaire des paquets est : axios

Installer : npm install axios --save

Simple Promesse en fonction des demandes

---

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

Answer 4

vous pouvez installer superagent

npm install superagent --save

alors pour faire appel post 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);
});  

Answer 5

À compter de 2018 et au-delà, vous avez une option plus moderne qui consiste à intégrer des async/await dans votre ReactJS application. Une promesse à base de client HTTP bibliothèque comme axios peut être utilisé. L'exemple de code est donné ci-dessous:

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