Risposte:
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.)
fetch()
funzione non restituisce i dati , restituisce solo una promessa .
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 .
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(…)
fetch
o superagent
o jQuery
o axios
o qualcos'altro che non fa parte di "Vanilla React" per fare qualcosa di diverso da quanto pubblicato sopra .
JSON.stringify({"key": "val"})
e poi sul lato del pallone fallorequest.get_json()
JSON.stringify
prima farlo.
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) {
...
}
}
...
}
await
-SyntaxError: await is a reserved word (33:19)
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.ajax
metodo ma puoi facilmente sostituirlo con librerie basate su AJAX come axios, superagent o fetch.
'{"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à.