Diferentes formas de obtener datos usando API en React

ReactJS: ReactJS es una biblioteca de JavaScript declarativa, eficiente y flexible para crear interfaces de usuario. Es ‘V’ en MVC. ReactJS es una biblioteca front-end de código abierto basada en componentes responsable solo de la capa de visualización de la aplicación. Es mantenido por Facebook.

API: API es una abreviatura de Interfaz de programación de aplicaciones, que es una colección de protocolos de comunicación y subrutinas utilizadas por varios programas para comunicarse entre ellos. Un programador puede hacer uso de varias herramientas API para hacer su programa más fácil y simple. Además, una API facilita a los programadores una forma eficiente de desarrollar sus programas de software. En este artículo, sabremos cómo obtenemos los datos de la API (interfaz de programación de aplicaciones). Para los datos, hemos utilizado el extremo de la API de

http://jsonplaceholder.typicode.com/users

Enfoque: en este artículo, sabremos cómo obtenemos los datos de la API (interfaz de programación de aplicaciones). Para los datos, hemos utilizado el extremo de la API de https://jsonplaceholder.typicode.com/todos , hemos creado el componente en App.js. Desde la API tenemos el objetivo «ID de usuario», «id», «título», «completado» y obtenemos los datos de los puntos finales de la API.

A continuación se muestra la implementación paso a paso de cómo obtenemos los datos de una API utilizando 3 formas diferentes de reacción. 

Paso 1: Crear Proyecto React  

npx create-react-app apis

Paso 2: Cambie su directorio e ingrese su gráfico de carpeta principal como

cd apis

Paso 3: escribe código en App.js para obtener datos de la API.

Estructura del proyecto:  Tendrá el siguiente aspecto.

Estructura del proyecto

Ahora tenemos 3 formas de obtener datos de una API

1. método fetch: El método fetch() en JavaScript se usa para solicitar al servidor y cargar la información en las páginas web. La solicitud puede ser de cualquier API que devuelva los datos del formato JSON o XML. Este método devuelve una promesa.

import {useEffect} from "react";
  
function App() {
   
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/todos')
    .then(response => response.json())
    .then(json => console.log(json))
    }, []);
  
  return (
    <div>
        Different ways to fetch Data
    </div>
  );
}
  
export default App;

Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando.

npm start

Salida: ahora abra localhost: 300 y en la consola, se obtienen los datos.

2. Paquete Axios: Axios es un cliente HTTP basado en promesas diseñado para Node.js y navegadores. Con Axios, podemos enviar fácilmente requests HTTP asíncronas a las API REST y realizar operaciones de creación, lectura, actualización y eliminación. Es un proyecto de colaboración de código abierto alojado en Github. Se puede importar en Javascript simple o con cualquier biblioteca en consecuencia. 

Para instalar Axios escriba el siguiente comando

npm i axios

import {useEffect} from "react";
import axios from "axios"
  
function App() {
  
  useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/todos")
      .then((response) => console.log(response.data));
    }, []);
  
  return (
    <div>
        Different ways to fetch Data
    </div>
  );
}
  
export default App;

Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando.

npm start 

Salida: ahora abra localhost: 300 y en la consola, se obtienen los datos.

3. Async-Await: esta es la forma preferida de obtener los datos de una API.

Async: Simplemente nos permite escribir código basado en promesas como si fuera sincrónico y comprueba que no estamos rompiendo el hilo de ejecución. Funciona de forma asíncrona a través del bucle de eventos. Las funciones asíncronas siempre devolverán un valor.

Await: la función Await se utiliza para esperar la promesa. Solo se puede usar dentro del bloque asíncrono. Hace que el código espere hasta que la promesa devuelva un resultado. Se usa para evitar el infierno de devolución de llamada y podemos usarlo con Axios en lugar del método de búsqueda, ya que Axios hace que nuestro código se vea más limpio y también lo hace más corto (ya que no necesitamos convertirlo al formato JSON).

import {useEffect} from "react";
import axios from "axios"
  
function App() {
   
  useEffect(() => {
    (async () => {
      try {
        const result = await axios.get(
"https://jsonplaceholder.typicode.com/todos")
        console.log(result.data);
      } catch (error) {
        console.error(error);
      }
    })()
  })
  
  return (
    <div >
        Different ways to fetch Data
    </div>
  );
}
  
export default App;

Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando.

npm start

Salida: ahora abra localhost: 300 y en la consola, se obtienen los datos.

4. Uso de gancho personalizado: cree un archivo (useFetch.js) para su gancho personalizado que devuelve el estado de parámetros importantes como datos, carga y error. El archivo App.js importará este gancho

Ahora escribe el siguiente código:

import { useEffect, useState } from "react";
import axios from "axios";
  
function useFetch(url) {
  const [data, setData] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  
  useEffect(() => {
    setLoading(true);
    axios
      .get(url)
      .then((response) => {
        setData(response.data);
      })
      .catch((err) => {
        setError(err);
      })
      .finally(() => {
        setLoading(false);
      });
  }, [url]);
  
  const refetch = () => {
    setLoading(true);
    axios
      .get(url)
      .then((response) => {
        setData(response.data);
      })
      .catch((err) => {
        setError(err);
      })
      .finally(() => {
        setLoading(false);
      });
  };
  
  return { data, loading, error, refetch };
}
  
export default useFetch;

Importe el enlace useFetch y pase la URL del extremo de la API desde donde desea obtener los datos.

import {useEffect} from "react";
import axios from "axios"
  
function App() {
  const { data: dataInfo, loading, error, refetch } = useFetch(
    https://jsonplaceholder.typicode.com/todos
  );
    
  return (
    <div >
        Different ways to fetch data
        {console.log(data)}
    </div>
  );
}
  
export default App;

Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando.

npm start

Salida: ahora abra localhost: 300 y en la consola, se obtienen los datos.