Cómo consumir API en React usando Fetch y Axios

Una API (interfaz de programación de aplicaciones) es un conjunto de protocolos que permite que una aplicación envíe solicitudes a un servidor y reciba una respuesta.

A través de las API, puede integrar piezas de software en su aplicación sin el trabajo esencial. Este proceso de usar una API en su aplicación generalmente se conoce como consumir una API. Por ejemplo, si desea mostrar una determinada ubicación en su sitio web, usaría la API de Google Maps en lugar de implementar la funcionalidad del mapa desde cero. Las API, por lo tanto, reducen su carga de trabajo y le ahorran tiempo.

Para aprender a consumir API REST en React usando Fetch y Axios, creará una aplicación React simple que obtiene datos aleatorios sobre gatos de una API cuando hace clic en un botón.

Tipos de API

Las API se pueden clasificar por disponibilidad o caso de uso. En términos de disponibilidad, las API pueden ser API públicas, privadas, de socios o compuestas. Cuando se clasifican de acuerdo con su propósito, pueden ser base de datos, remoto, sistemas operativos o API web. En este artículo, consumiremos un tipo de API web llamada REST (Estado representacional) API.

Las API REST le permiten obtener datos de una fuente a través de una URL. En React, hay varios métodos que puede usar para consumir API REST. Este artículo analiza los dos métodos más populares, a saber, JavaScript Fetch API y Axios, el cliente HTTP basado en promesas.

Relacionado: ¿Qué es la API REST y cómo puede obtener datos para su aplicación o sitio web?

requisitos previos

Para seguir esta guía, debe tener:

• Comprensión básica de JavaScript.
• Conocimientos básicos de React y React hooks.
• NPM instalado localmente en su máquina.
• Un editor de texto o IDE de su elección instalado.

Crear una aplicación de reacción

Primero, deberá crear una aplicación React. Copie el siguiente comando en su terminal para configurar un entorno de desarrollo de React.

npx crear-reaccionar-aplicación catfact

Una vez que el comando termine de ejecutarse, abra el hecho de gato carpeta en su editor de texto. Escribirá su código en el archivo App.js en el origen carpeta, así que continúe y elimine el código innecesario.

importar "./Aplicación.css";
aplicación de función () {
 regreso (


¡Presiona el botón para ver un hecho aleatorio de gatos!



Obtener el hecho del gato



 );
}
exportar la aplicación predeterminada;

A continuación, cree una interfaz de usuario simple que se usará para mostrar el hecho del gato aleatorio.

En aplicación.js

importar './Aplicación.css';
aplicación de función () {
 regreso (


¡Presiona el botón para ver un hecho aleatorio de gatos!



Obtener el hecho del gato



 );
}
exportar la aplicación predeterminada;

Para diseñar su aplicación, agregue el siguiente código a la aplicación.css Archivo.

@importar URL(' https://fonts.googleapis.com/css2?family=Playfair+Display: ital, peso@700;500&display=swap');
.aplicación {
 familia de fuentes: 'Playfair Display', serif;
 margen: 20px 15vw;
}
h2 {
 familia de fuentes: 'Playfair Display', serif;
 peso de fuente: 700;
 tamaño de fuente: 3em;
}
botón {
 relleno: 1em 1,2em;
 borde: ninguno;
 tamaño de fuente: 1em;
 color de fondo: #131212;
 color: #ffffff;
 borde-radio: 0.5em;
 cursor: puntero;
}
botón: flotar{
 color de fondo:#3b3b3b;
}

Su aplicación ahora debería verse así.

En los siguientes pasos, obtendrá datos de la API y los mostrará en la aplicación.

Relacionado: Cómo crear su primera aplicación React con JavaScript

Consumir API REST usando Fetch

Obtener API es una interfaz que le permite obtener recursos de una API a través de solicitudes HTTP. El ha podido recuperar() El método recibe la URL de la ruta al recurso como argumento obligatorio y devuelve una promesa que se puede resolver en una respuesta.

La sintaxis básica de la ha podido recuperar() método es el siguiente:

buscar ('url al recurso')
 .then (respuesta => // manejar la respuesta)
 .catch (err => // manejar el error)

Implementando la API Fetch

En React, la API Fetch se usa de la misma manera que en JavaScript simple.

ha podido recuperar(" https://catfact.ninja/fact")
 .entonces (respuesta => respuesta.json())
 .then (datos => // manejar datos)
 .catch (err => // manejar el error)

En la primera línea del código anterior, está pasando la URL de la API al ha podido recuperar() método. ha podido recuperar() devuelve una respuesta HTTP que se convierte a JSON usando el json() método. En la tercera línea, obtiene acceso a los datos que luego puede usar en la aplicación. Finalmente, el bloque catch le permite manejar los errores con gracia.

Para implementar la solicitud de recuperación en el componente de la aplicación, utilizará ganchos React. Al usar el efecto de uso gancho, su aplicación hará la solicitud una vez que se cargue el componente y el useState hook creará y actualizará el estado del componente. Hacer un seguimiento del estado garantiza que el componente se vuelva a representar cuando la API de obtención devuelva la respuesta.

Relacionado: Hooks: El héroe de React

importar useState y useEffect.
importar {useEffect, useState} desde 'reaccionar'

Cree un estado para contener el hecho del gato y la función para actualizarlo.

const [hecho, establecerHecho] = usarEstado('')

A continuación, cree una función para realizar la solicitud GET a la API y llámela en el efecto de uso gancho.

const fetchFact = () => {
ha podido recuperar(" https://catfact.ninja/fact")
 .then((respuesta) => respuesta.json())
 .then((datos) => setFact (datos.hechos));
}
usarEfecto(() => {
 buscarHecho()
}, []);

Su archivo app.js ahora debería verse así:

importar "./Aplicación.css";
importar { useEffect, useState } de "reaccionar";
aplicación de función () {
 const [hecho, setFact] = useState("");
 const fetchFact = () => {
 ha podido recuperar(" https://catfact.ninja/fact")
 .then((respuesta) => respuesta.json())
 .then((datos) => setFact (datos.hechos));
}
usarEfecto(() => {
 buscarHecho()
}, []);
regreso (


¡Presiona el botón para ver un hecho aleatorio de gatos!



Obtener el hecho del gato
{hecho}




);
}
exportar la aplicación predeterminada;

Ahora debería poder ver un hecho aleatorio sobre los gatos que se muestra en su navegador.

A continuación, escriba código para mostrar un hecho aleatorio cuando se haga clic en el botón.

Modifique el botón para incluir un al hacer clic evento y su función de controlador.

 handleClick()}>Obtener datos sobre gatos

Definir el manejarClick() función como se muestra a continuación.

const handleClick = () => {
 buscarHecho()
}

Ahora, al hacer clic en el botón, el manejarClick() la función llamará obtener datos() que realizará la solicitud de API y actualizará el estado con un nuevo hecho aleatorio. En consecuencia, la interfaz de usuario de la aplicación se actualizará para mostrar el hecho actual.

Consumir API REST con Axios

En vez de ha podido recuperar(), puedes consumir APIs con Axios. Me gusta ha podido recuperar(), Axios le permite realizar solicitudes a un punto final de API. Sin embargo, hay varias diferencias entre los dos.

• Axios devuelve automáticamente la respuesta en JSON mientras que tiene que convertirla a JSON cuando usa la API Fetch.
• Axios requiere solo una devolución de llamada .then() a diferencia de la API Fetch.
• Axios es compatible con los principales navegadores, mientras que Fetch solo es compatible con Chrome 42+, Edge 14+, Firefox 39+ y Safari 10+

Implementando Axios

Instale Axios ejecutando el siguiente comando.

npm instalar axios

Una vez completada la instalación, importe el paquete Axios en el componente de su aplicación y modifique el buscarHecho() función para usarlo.

importar axios desde 'axios'
const fetchFact = () => {
 axios.get(" https://catfact.ninja/fact").then((response) => {
 setFact (respuesta.datos.hecho)
 });
}

¡Eso es! Su aplicación debería mostrar un hecho de gato aleatorio cuando se carga en el navegador y cuando hace clic en el botón.

Más usos para las API con React

Puede consumir API REST en React utilizando varios métodos. En este tutorial, aprendió a usar Fetch y Axios para obtener un hecho aleatorio de una API REST. Los casos de uso de las API en aplicaciones del mundo real son infinitos.

Por ejemplo, a través de las API de pago como Stripe y PayPal, las tiendas pueden manejar fácilmente las transacciones de los clientes en línea sin necesidad de implementar la funcionalidad ellos mismos. Por lo tanto, incluso los usuarios menos expertos en tecnología pueden crear aplicaciones útiles que satisfagan sus necesidades.

¿Qué es la autenticación API y cómo funciona?

¿Cómo prueba que la persona que quiere acceder a datos importantes es quien dice ser? Ahí es donde entra la autenticación API...

Leer siguiente

Sobre el Autor