Respostas:
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).
fetch()
função não retorna os dados , apenas retorna uma promessa .
fetch
está embutido no React, o que não é, e não há link para os documentos mencionados. fetch
é (no momento da redação) uma API experimental baseada em promessa . Para compatibilidade com o navegador, você precisará de um polyfill babel .
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(…)
fetch
ou superagent
ou jQuery
ou axios
ou qualquer outra coisa que não faz parte do "vanilla Reagir", a fim de fazer outra coisa senão o que é postado acima .
JSON.stringify({"key": "val"})
e, em seguida, no lado do balão, #request.get_json()
JSON.stringify
primeiro.
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) {
...
}
}
...
}
await
-SyntaxError: await is a reserved word (33:19)
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.ajax
método, mas você pode substituí-lo facilmente por bibliotecas baseadas em AJAX, como axios, superagent ou fetch.
'{"Id":"112","User":"xyz"}'
e altere a URL para localhost: 8080 / myapi / ui / start, é isso, uma vez que a chamada XHR for bem-sucedida, você continuará no método concluído e terá acesso a seus dados através do resultado propriedade.