reactjs - helmet - react title
¿Cómo hacer una llamada de descanso después del código ReactJS? (8)
Soy nuevo en reactJS y UI y quería saber cómo hacer una simple llamada POST basada en reposo desde el código reactJS.
Si hay algún ejemplo presente, sería realmente útil.
Gracias.
A partir de 2018 y más allá, tiene una opción más moderna que es incorporar async / await en su aplicación ReactJS. Se puede utilizar una biblioteca de cliente HTTP basada en promesas, como axios. El código de muestra se proporciona a continuación:
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) {
...
}
}
...
}
Aquí hay un ejemplo: 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'');
});
jquery.ajax
método
jquery.ajax
, pero puede reemplazarlo fácilmente con libs basadas en AJAX como axios, superagent o fetch.
Creo que de esta manera también es normal. Pero lo siento, no puedo describir en 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
fetch (''url / preguntas'', {método: ''POST'', encabezados: {Aceptar: ''application / json'', ''Content-Type'': ''application / json'',}, body: JSON.stringify (this.state) }). luego (respuesta => {console.log (respuesta)}) .catch (error => {console.log (error)})
Directamente de los documentos React :
fetch(''https://mywebsite.com/endpoint/'', {
method: ''POST'',
headers: {
''Accept'': ''application/json'',
''Content-Type'': ''application/json'',
},
body: JSON.stringify({
firstParam: ''yourValue'',
secondParam: ''yourOtherValue'',
})
})
(Esto está publicando JSON, pero también podría hacer, por ejemplo, formulario multiparte).
Otro paquete recientemente popular es: axios
Instalar:
npm install axios --save
Promesa simple basada en solicitudes
axios.post(''/user'', {
firstName: ''Fred'',
lastName: ''Flintstone''
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
React realmente no tiene una opinión sobre cómo hacer llamadas REST. Básicamente, puede elegir el tipo de biblioteca AJAX que desee para esta tarea.
La forma más fácil con JavaScript antiguo es probablemente algo como esto:
var request = new XMLHttpRequest();
request.open(''POST'', ''/my/url'', true);
request.setRequestHeader(''Content-Type'', ''application/json; charset=UTF-8'');
request.send(data);
En los navegadores modernos también puedes usar
fetch
.
Si tiene más componentes que hacen llamadas REST, podría tener sentido colocar este tipo de lógica en una clase que se pueda usar en todos los componentes.
Por ejemplo,
RESTClient.post(…)
puedes instalar superagent
npm install superagent --save
luego para hacer una llamada posterior al 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);
});
Here hay una lista de la comparación de bibliotecas ajax basada en las características y el soporte. Prefiero usar fetch solo para el desarrollo del lado del cliente o isomorphic-fetch para usar tanto en el desarrollo del lado del cliente como del lado del servidor.
Para obtener más información sobre isomorphic-fetch vs fetch