Saltar al contenido

Cómo hacer peticiones HTTP en reactOct, 18thIn este tutorial, vamos a aprender acerca de cómo enviar Ajax …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo enviar las solicitudes Ajax en reaccionar o cómo recuperar los datos desde las API.

Estamos utilizando axios http biblioteca para recuperar los datos desde el servidor.

Axios : es un cliente HTTP basado promesa para el navegador y node.js.

en primer lugar, tenemos que instalar la biblioteca axios usando el gestor de paquetes NPM.

npm i axios

una vez que se ha instalado correctamente los axios Vamos a hacer algunas llamadas a la API al servidor.

import React,{Component} from 'react'
import axios from 'axios';

class App extends Component{

componentDidMount(){
axios.get('https://jsonplaceholder.typicode.comodos/1')
.then(res=>console.log(res))
.catch(err=>console.log(err))
}

render(){
return (

Http requests in react

)
}

}

En el código anterior, hacemos la petición HTTP en el interior del método de ciclo de vida componentDidMount () y registrar la respuesta de la consola.

Por qué componentDidMount?

En el método de ciclo de vida de reaccionar componentDidMount se invoca inmediatamente después de un componente está conectado a los navegadores dom.so que es el lugar correcto para hacer las peticiones http. La tienda de

dejar que los datos contenidos en el estado en lugar de entrar en el navegador.

completo código de ejemplo

import React,{Component} from 'react'
import axios from 'axios';

class App extends Component{

state = {
todo:null}

componentDidMount(){
axios.get('https://jsonplaceholder.typicode.comodos/1')
.then(res=>{
this.setState({
todo:res.data
})
})
.catch(err=>console.log(err))
}

render(){
return (

Http requests in react

{this.state.todo ?

{this.state.todo.title}

:

Loading...

}

)
}

}

Nos están mostrando el Cargando … mensaje al usuario si la solicitud está todavía en proceso.

Codepen demostración