¿Cómo hacer una llamada de descanso después del código ReactJS?

Soy nuevo en ReactJS y UI y quería saber cómo hacer una simple llamada POST basada en REST desde el código ReactJS.

Si hay algún ejemplo presente, sería realmente útil.

Directamente de los documentos React :

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

(Esto está publicando JSON, pero también podría hacer, por ejemplo, formulario multiparte).

React realmente no tiene una opinión sobre cómo hacer llamadas REST. Básicamente, puede elegir el tipo de biblioteca AJAX que desee para esta tarea.

La forma más fácil con JavaScript antiguo es probablemente algo como esto:

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

En los navegadores modernos también puede usar fetch.

Si tiene más componentes que hacen llamadas REST, podría tener sentido colocar este tipo de lógica en una clase que se pueda usar en todos los componentes. P.ejRESTClient.post(…)

Otro paquete recientemente popular es: axios

Instalar en pc : npm install axios --save

Promesa simple basada en solicitudes

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

puedes instalar superagent

npm install superagent --save

luego para hacer una llamada posterior al servidor

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

A partir de 2018 y más allá, tiene una opción más moderna que es incorporar async / await en su aplicación ReactJS. Se puede utilizar una biblioteca de cliente HTTP basada en promesas, como axios. El código de muestra se proporciona a continuación:

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

Creo que de esta manera también es normal. Pero lo siento, no puedo describir en inglés ((

    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 / preguntas', {método: 'POST', encabezados: {Aceptar: 'application / json', 'Content-Type': 'application / json',}, body: JSON.stringify (this.state) }). luego (respuesta => {console.log (respuesta)}) .catch (error => {console.log (error)})

Aquí hay una lista de la comparación de bibliotecas ajax basada en las características y el soporte. Prefiero usar fetch solo para el desarrollo del lado del cliente o isomorphic-fetch para usar tanto en el desarrollo del lado del cliente como del lado del servidor.

Para obtener más información sobre isomorphic-fetch vs fetch

Aquí hay una función de utilidad modificada (otra publicación en la pila) para obtener y publicar ambas. Hacer el archivo 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 };

Uso como a continuación en otro componente

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

Aquí hay un ejemplo: 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');
  });

Utilizó el jquery.ajaxmétodo, pero puede reemplazarlo fácilmente con bibliotecas basadas en AJAX como axios, superagent o fetch.