Como fazer uma chamada pós-descanso a partir do código ReactJS?

Eu sou novo no ReactJS e na interface do usuário e queria saber como fazer uma simples chamada POST baseada em REST a partir do código ReactJS.

Se houver algum exemplo presente, seria realmente útil.

Diretamente dos documentos do React :

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

(Isso está postando JSON, mas você também pode fazer, por exemplo, formulário de várias partes).

O React realmente não tem uma opinião sobre como você faz chamadas REST. Basicamente, você pode escolher qualquer tipo de biblioteca AJAX que desejar para esta tarefa.

A maneira mais fácil com o JavaScript antigo simples é provavelmente algo como isto:

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

Nos navegadores modernos, você também pode usar fetch.

Se você tiver mais componentes que fazem chamadas REST, pode fazer sentido colocar esse tipo de lógica em uma classe que possa ser usada entre os componentes. Por exemploRESTClient.post(…)

Outro pacote recentemente popular é: axios

Instalar: npm install axios --save

Pedidos simples baseados em promessas

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

você pode instalar superagent

npm install superagent --save

depois, para fazer uma chamada posterior ao 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 e além, você tem uma opção mais moderna que é incorporar async / wait no seu aplicativo ReactJS. Uma biblioteca de cliente HTTP baseada em promessa, como axios, pode ser usada. O código de exemplo é dado abaixo:

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

Penso assim também de maneira normal. Desculpe, não posso descrever em 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

busca ('url / questions', {method: 'POST', headers: {Accept: 'application / json', 'Content-Type': 'application / json',}, body: JSON.stringify (this.state) }). then (response => {console.log (response)}) .catch (erro => {console.log (erro)})

Aqui está uma lista de comparação de bibliotecas ajax com base nos recursos e suporte. Prefiro usar a busca apenas para desenvolvimento no lado do cliente ou busca isomórfica para uso no desenvolvimento no lado do cliente e no servidor.

Para obter mais informações sobre busca isomórfica ou busca

Aqui está uma função util modificada (outra publicação na pilha) para obter e publicar as duas. Crie o arquivo 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 abaixo em outro 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);   
    });
  }

Aqui está um exemplo: 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');
  });

Ele usou o jquery.ajaxmétodo, mas você pode substituí-lo facilmente por bibliotecas baseadas em AJAX, como axios, superagent ou fetch.