reactjs - helmet - react title

¿Cómo hacer una llamada de descanso después del código ReactJS?

Question

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.

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

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