Introducción

Al desarrollar aplicaciones web, accedemos de forma rutinaria a los recursos alojados en un servidor. Solicitar, enviar o realizar otras operaciones en los recursos se realiza a través de solicitudes HTTP. Estas solicitudes se envían desde el cliente a un host en un servidor. Al realizar una solicitud HTTP, el cliente emplea un URL (localizador uniforme de recursos) y un payload que contiene la información necesaria para acceder a los recursos del servidor.

Los cinco métodos comunes de solicitud HTTP son GET, PUT, POST, PATCHy DELETE. Estos métodos nos permiten realizar operaciones CRUD estándar.

En este artículo, aprenderemos cómo realizar una solicitud GET HTTP en React utilizando Axios o Fetch API, así como también cómo hacerlo en los componentes funcionales y de clase.

¿Qué es la solicitud GET?

GET es un método de solicitud HTTP que se utiliza para obtener recursos de los servidores.

Axios y Fetch API son los dos métodos principales para realizar solicitudes HTTP.

• Fetch API es un módulo de JavaScript integrado basado en promesas para recuperar recursos de un servidor o un punto final de API.
• Axios es una biblioteca de cliente HTTP basada en promesas que simplifica el envío de solicitudes HTTP asincrónicas a puntos finales REST. Esta es una biblioteca externa que debe instalarse.

En este artículo, veremos cómo realizar solicitudes GET en componentes funcionales de React utilizando los métodos Fetch API y Axios, y luego cómo hacer lo mismo en componentes basados ​​en clases.

Cómo realizar una solicitud GET HTTP en los componentes funcionales de React

Un componente funcional se crea cuando una función de JavaScript (ya sea normal o ES6) devuelve un elemento React (JSX). Usamos ganchos React cuando trabajamos con componentes funcionales, que son muy importantes cuando se realizan solicitudes GET.

Usaremos el useState() y useEffect() manos. Porque el useEffect() gancho se renderiza inmediatamente cuando la aplicación se monta, siempre realizamos solicitudes GET dentro de él, y usamos el useState() gancho para almacenar nuestros datos/respuesta.

Cómo realizar una solicitud GET HTTP en el componente funcional de React con la API Fetch

La fetch() El método acepta un argumento obligatorio: la URL del recurso que queremos obtener, así como un argumento opcional que indica el método de solicitud. El valor predeterminado para ese argumento opcional es GET, por lo que no es necesario configurarlo al realizar una solicitud GET.

Entonces Fetch API devuelve un Promise, entonces podemos usar el then() y catch() métodos para manejar el éxito o el fracaso:

import { useState, useEffect } from 'react';

const App = () => {
   const [posts, setPosts] = useState([]);

   useEffect(() => {
      fetch('https://jsonplaceholder.typicode.com/posts')
         .then((res) => res.json())
         .then((data) => {
            console.log(data);
            setPosts(data);
         })
         .catch((err) => {
            console.log(err.message);
         });
   }, []);

   return (
      
   );
};

Así es como se ve una solicitud GET estándar. Ahora, descompongamos lo que hemos hecho hasta ahora para que pueda comprender mejor el código anterior. En primer lugar, creamos un estado para contener todos los recursos/publicaciones que obtendríamos del posts API:

const [posts, setPosts] = useState([]);

Luego hicimos uso de la useEffect() gancho y escribimos nuestra solicitud GET en él para que la solicitud se active inmediatamente después de que se monte la aplicación:

useEffect(() => {
   fetch('https://jsonplaceholder.typicode.com/posts')
      .then((res) => res.json())
      .then((data) => {
         console.log(data);
         setPosts(data);
      })
      .catch((err) => {
         console.log(err.message);
      });
}, []);

Después de eso, creamos una solicitud de recuperación en el useEffect() hook y pasó la URL que podemos usar para acceder al servidor. Como esto devuelve una promesa, usamos el then() método. Debido a que este método devuelve un objeto de respuesta en lugar de JSON, primero convertimos los datos al formato JSON:

useEffect(() => {
   fetch('https://jsonplaceholder.typicode.com/posts')
      .then((res) => res.json())
}, []);

Luego procedimos a obtener las publicaciones/datos y los almacenamos en el estado que creamos anteriormente:

useEffect(() => {
   fetch('https://jsonplaceholder.typicode.com/posts')
      .then((res) => res.json())
      .then((data) => {
         console.log(data);
         setPosts(data);
      }
}, []);

Finalmente usamos el catch() método para manejar errores:

useEffect(() => {
   fetch('https://jsonplaceholder.typicode.com/posts')
      .then((res) => res.json())
      .then((data) => {
         console.log(data);
         setPosts(data);
      })
      .catch((err) => {
         console.log(err.message);
      });
}, []);

Ya realizamos una solicitud GET y guardamos nuestros datos en el estado que creamos. Ahora podemos consumir los datos dentro de nuestra aplicación React.

Cómo realizar una solicitud GET HTTP en el componente funcional de React con Axios

Además de Fetch API, también podemos usar Axios para enviar solicitudes GET. Axios es una biblioteca de cliente HTTP basada en promesas que simplifica el envío de solicitudes HTTP asincrónicas a puntos finales REST.

Si queremos usar Axios, que es una biblioteca externa, primero debemos instalarlo en nuestro proyecto ejecutando el siguiente comando en el directorio de nuestro proyecto:

$ npm install axios

Una vez que hayamos instalado correctamente Axios, podemos proceder a realizar nuestra solicitud GET:

import { useState, useEffect } from 'react';
import axios from 'axios';

const App = () => {
   const [posts, setPosts] = useState([]);

   useEffect(() => {
      axios
         .get('https://jsonplaceholder.typicode.com/posts?_limit=10')
         .then((response) => {
            setPosts(response.data);
         })
         .catch((err) => {
            console.log(err);
         });
   }, []);

   return (
      
   );
};

¡Esto se ve mucho más limpio que el de Fetch API! Echando un vistazo al código anterior, comenzamos importando Axios ya que era una biblioteca externa que instalamos:

import axios from 'axios';

Luego realizamos la solicitud GET dentro del useEffect() gancho como lo hicimos para Fetch API, pero esta vez la sintaxis es un poco diferente:

useEffect(() => {
   axios
      .get('https://jsonplaceholder.typicode.com/posts?_limit=10')
      .then((response) => {
         setPosts(response.data);
      })
      .catch((err) => {
         console.log(err);
      });
}, []);

A diferencia del método Fetch API, no se requieren opciones para declarar el método. Simplemente adjuntamos el método a la instancia y lo consultamos, además no hay necesidad de convertir los datos porque los devuelve como JSON.

Cómo realizar una solicitud GET HTTP en el componente de clase de React

Un componente de clase es una clase ES6 que devuelve JSX y requiere el uso de extensiones de React. Antes de la introducción de los ganchos, este era el método más utilizado (es decir, versiones anteriores 16.8) porque el estado no se podía utilizar dentro de los componentes funcionales.

A pesar de la disponibilidad de ganchos, muchas personas continúan usando componentes de clase. Veamos cómo podemos usar el constructor() la propiedad de estado del método, y la ComponentDidMount() método de ciclo de vida para realizar solicitudes GET HTTP en React con componentes de clase.

Cómo realizar una solicitud GET HTTP en los componentes de clase de React con Fetch API

Esto es muy similar a cómo realizamos el GET solicitud en componentes funcionales. La única diferencia es que ahora usaremos la propiedad estatal en el constructor() método en lugar del useState() gancho. Además, manejaremos nuestra GET solicitud en el ComponentDidMount() ciclo de vida en lugar de useEffect() gancho, para que esta solicitud se active una vez que se monte nuestra aplicación:

import React, { Component } from 'react';

class App extends Component {
   constructor(props) {
      super(props);
      this.state = {
         posts: [],
      };
   }

   componentDidMount() {
      fetch('https://jsonplaceholder.typicode.com/posts')
         .then((response) => response.json())
         .then((data) => this.setState({ posts: data }))
         .catch((error) => console.log(error));
   }

   render() {
      const { posts } = this.state;

      return (
         
      );
   }
}

En el código anterior, usamos el método constructor para inicializar el estado de un objeto para almacenar los recursos/datos que obtendremos de nuestro servidor/API:

constructor(props) {
   super(props);
   this.state = {
      posts: [],
   };
}

Luego realizamos nuestra solicitud GET en el componentDidMount() método de ciclo de vida para que se active una vez que se monte la aplicación:

componentDidMount() {
   fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => response.json())
      .then((data) => this.setState({ posts: data }))
      .catch((error) => console.log(error));
}

state es un objeto que tiene muchos estados, primero lo desestructuramos para obtener el posts estado, que luego se puede utilizar:

render() {
   const { posts } = this.state;

   return (
      
   );
}

Cómo realizar una solicitud GET HTTP en los componentes de clase de React con Axios

Como vimos con los componentes funcionales, podemos enviar GET solicitudes con Axios. Todo lo que queda es ejecutar el GET solicitud dentro del ComponentDidMount() ciclo de vida e importar Axios:

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

class App extends Component {
   constructor(props) {
      super(props);
      this.state = {
         posts: [],
      };
   }

   componentDidMount() {
      axios
         .get('https://jsonplaceholder.typicode.com/posts')
         .then((response) => {
            this.setState({ posts: response.data });
         })
         .catch((error) => {
            console.log(error);
         });
   }

   render() {
      const { posts } = this.state;
      return (
         
      );
   }
}

Conclusión

En este artículo, aprendimos a realizar solicitudes GET HTTP con componentes funcionales y de clase utilizando los dos métodos más utilizados: Fetch API y Axios.

El uso de un método específico depende totalmente de usted.