Come effettuare una chiamata di riposo dal codice ReactJS?


126

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.


6
Potresti per favore scegliere la risposta che ti ha aiutato?
Socrate,

Risposte:


215

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


4
Devi installarlo e importarlo . Non dimenticare, la fetch()funzione non restituisce i dati , restituisce solo una promessa .
Malvolio,

1
haha @Divya, stavo per fare lo stesso commento prima di leggere il tuo. Non sono sicuro se inserirlo o meno in React.createClass. Inoltre, potremmo per favore avere un link ai documenti di reazione? Ho provato a cercare nel loro sito ( facebook.github.io/react/docs/hello-world.html ) senza successo.
Tyler L

1
Possiamo modificare la risposta originale per includere l'importazione?
Tyler L

5
IMO, @amann ha una risposta migliore di seguito . Questa risposta implica che fetchè incorporato in React, che non lo è, e non esiste alcun collegamento ai documenti a cui si fa riferimento. fetchè (al momento della stesura) un'API sperimentale basata su Promise . Per la compatibilità con il browser, avrai bisogno di un polyfill babel .
chris,

2
Nota che questo proviene dai documenti React Native, non dai documenti React JS, ma puoi usare Fetch_API anche in React JS. facebook.github.io/react-native/docs/network.html
Pål Brattberg

23

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(…)


5
Per me, questa è la risposta migliore, perché React non ha nulla incorporato. Devi importare fetcho superagento jQueryo axioso qualcos'altro che non fa parte di "Vanilla React" per fare qualcosa di diverso da quanto pubblicato sopra .
vapcguy,

Sembra che se stai usando il pallone, funziona bene JSON.stringify({"key": "val"})e poi sul lato del pallone fallorequest.get_json()
Pro Q

Sì, se pubblichi JSON, devi JSON.stringifyprima farlo.
amann,

19

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

9

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

5

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

per qualche ragione nodejs interpreta await-SyntaxError: await is a reserved word (33:19)
prayagupd il

@prayagupd quale versione del nodo stai usando?
Kevin Le - Khnle,

5

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



0

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

-4

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.


Grazie mille per l'esempio :). Volevo anche capire se il mio servizio prevede dati in formato JSON, quindi quali modifiche sarebbero necessarie? Qualsiasi tipo di informazione sarebbe davvero utile. Quindi quando sto usando il comando curl per colpire l'endpoint è come curl -v -X POST localhost: 8080 / myapi / ui / start -d '{"Id": "112", "User": "xyz"}' quindi come posso chiamare un tale servizio.
Divya,

crea una variabile chiamata data con '{"Id":"112","User":"xyz"}'e modifica l'URL in localhost: 8080 / myapi / ui / start, questo è tutto, una volta che la chiamata XHR ha esito positivo ti atterrerai nel metodo fatto e avrai accesso ai tuoi dati tramite il risultato proprietà.
Sanyam Agrawal,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.