Cómo hacer solicitudes http en reaccionar

Cómo hacer solicitudes http en reaccionar

En este tutorial, aprenderemos cómo enviar Ajax reaccionar a las solicitudes o cómo recuperar datos de las API.

Usamos la biblioteca http de axios para obtener datos del backend.

Axios: es un cliente HTTP basado en Promise para navegador y node.js.

primero necesitamos instalar la biblioteca axios usando el administrador de paquetes npm.

Una vez que haya instalado correctamente axios, hagamos algunas llamadas API al servidor.

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

class App extends Component{

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


    render(){
        return (
            <div>
            <h1>Http requests in react</h1>
            </div>
        )
    }

}

En el código anterior, hacemos la solicitud http dentro del componentDidMount() método de ciclo de vida y guarde la respuesta en la consola.

Índice
  1. ¿Por qué componenteDidMount?
  2. Ejemplo de código completo
  3. Demostración de Codepen

¿Por qué componenteDidMount?

En la reacción, el método de ciclo de vida del componenteDidMount se invoca inmediatamente después de conectar un componente a los navegadores dom. entonces este es el lugar correcto para hacer solicitudes http.

Almacenemos los datos dentro del state en lugar de iniciar sesión en el navegador.

Ejemplo de código completo

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

class App extends Component{

state = {
   todo:null}


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


    render(){
        return (
            <div>
            <h1>Http requests in react</h1>
            {this.state.todo ? <p>{this.state.todo.title}</p> : <p>Loading...</p>}            </div>
        )
    }

}

mostramos el Loading... mensaje al usuario si la solicitud aún está en curso.

Demostración de Codepen

Si quieres conocer otros artículos parecidos a Cómo hacer solicitudes http en reaccionar puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas