Come effettuare una chiamata di riposo dal codice ReactJS?

Sono nuovo di ReactJS e UI e volevo sapere come effettuare una semplice chiamata POST basata su REST dal codice ReactJS.

Se c'è qualche esempio presente, sarebbe davvero utile.

Direttamente dai documenti di React :

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

(Questo sta pubblicando JSON, ma potresti anche fare, ad esempio, moduli multipart.)

React non ha davvero un'opinione su come si effettuano le chiamate REST. Fondamentalmente puoi scegliere qualunque tipo di libreria AJAX ti piaccia per questo compito.

Il modo più semplice con il semplice vecchio JavaScript è probabilmente qualcosa del genere:

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

Nei browser moderni puoi anche usare fetch.

Se si dispone di più componenti che effettuano chiamate REST, potrebbe essere logico inserire questo tipo di logica in una classe che può essere utilizzata tra i componenti. Per esempioRESTClient.post(…)

Un altro pacchetto recentemente popolare è: axios

Installa: npm install axios --save

Richieste basate sulla semplice promessa

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

puoi installare superagent

npm install superagent --save

quindi per effettuare chiamate post al server

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 partire dal 2018 e oltre, hai un'opzione più moderna che consiste nell'incorporare / attendere nell'applicazione ReactJS. È possibile utilizzare una libreria client HTTP basata su promesse come axios. Il codice di esempio è riportato di seguito:

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 che in questo modo anche un modo normale. Mi dispiace, non posso descriverlo in inglese ((

    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', {metodo: 'POST', intestazioni: {Accept: 'application / json', 'Content-Type': 'application / json',}, body: JSON.stringify (this.state) }). then (response => {console.log (response)}) .catch (error => {console.log (error)})

Ecco un elenco di confronto delle librerie Ajax in base alle funzionalità e al supporto. Preferisco usare il recupero solo per lo sviluppo lato client o il recupero isomorfo per l'utilizzo sia nello sviluppo lato client che lato server.

Per ulteriori informazioni su isomorphic-fetch vs fetch

Ecco una funzione util modificata (un altro post in pila) per ottenere e pubblicare entrambi. Crea il file 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 };

Utilizzo come di seguito in un altro 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);   
    });
  }

Ecco un esempio: 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');
  });

Ha usato il jquery.ajaxmetodo ma puoi facilmente sostituirlo con librerie basate su AJAX come axios, superagent o fetch.