Comment faire un appel de repos à partir du code ReactJS?

Je suis nouveau dans ReactJS et UI et je voulais savoir comment faire un simple appel POST basé sur REST à partir du code ReactJS.

S'il y a un exemple, ce serait vraiment utile.

Directement à partir des documents React :

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

(Il s'agit de publier du JSON, mais vous pouvez également faire, par exemple, un formulaire en plusieurs parties.)

React n'a pas vraiment d'opinion sur la façon dont vous passez des appels REST. En gros, vous pouvez choisir le type de bibliothèque AJAX que vous souhaitez pour cette tâche.

Le moyen le plus simple avec l'ancien 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 de composants qui effectuent des appels REST, il peut être judicieux de placer ce type de logique dans une classe qui peut être utilisée entre les composants. Par exempleRESTClient.post(…)

Un autre paquet récemment populaire est: axios

Installer: npm install axios --save

Demandes basées sur des promesses simples

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

vous pouvez installer superagent

npm install superagent --save

puis pour faire un appel 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);
});  

À partir de 2018 et au-delà, vous disposez d'une option plus moderne qui consiste à incorporer async / await dans votre application ReactJS. Une bibliothèque client HTTP basée sur la promesse telle qu'axios peut être utilisée. 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) {
           ...
        }
    }
    ...
}

Je pense que de cette façon aussi une manière normale. Mais désolé, je ne peux pas décrire en anglais ((

    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 / questions', {méthode: 'POST', headers: {Accept: 'application / json', 'Content-Type': 'application / json',}, body: JSON.stringify (this.state) }). then (réponse => {console.log (réponse)}) .catch (erreur => {console.log (erreur)})

Voici une liste de comparaison des bibliothèques ajax basée sur les fonctionnalités et le support. Je préfère utiliser fetch uniquement pour le développement côté client ou isomorphic-fetch pour une utilisation à la fois côté client et développement côté serveur.

Pour plus d'informations sur isomorphic-fetch vs fetch

Voici une fonction util modifiée (un autre article sur la pile) pour obtenir et publier les deux. Créez le fichier 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 };

Utilisation comme ci-dessous dans un autre composant

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

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 utilisait une jquery.ajaxméthode mais vous pouvez facilement la remplacer par des bibliothèques basées sur AJAX comme axios, superagent ou fetch.