El manejo de datos externos a través de APIs es una tarea común en aplicaciones web modernas. En React, puedes utilizar la función fetch o librerías como Axios para hacer solicitudes HTTP a APIs y recuperar datos que se integren en tus componentes. En este capítulo, aprenderemos a manejar el ciclo de vida de las solicitudes asíncronas utilizando fetch, manejar errores, y cómo actualizar el estado de tu aplicación en respuesta a los datos obtenidos.

Introducción a fetch

fetch es una API nativa de JavaScript que te permite hacer solicitudes HTTP desde el navegador. Es simple de usar y compatible con Promesas, lo que facilita el manejo de operaciones asíncronas.

Ejemplo Básico de fetch

Aquí tienes un ejemplo básico de cómo usar fetch para hacer una solicitud GET a una API y mostrar los datos en un componente React:

jsx

En este ejemplo, el hook useEffect realiza la solicitud a la API cuando el componente se monta. Si la solicitud es exitosa, los datos se guardan en el estado y se muestran. Si hay un error, se maneja mostrando un mensaje de error.

Manejo de Errores

Es importante manejar correctamente los errores cuando se trabaja con fetch. Un error puede ocurrir si la red falla o si la API devuelve una respuesta con un código de error HTTP. En el ejemplo anterior, hemos manejado ambos tipos de errores: problemas de red y respuestas que no son ok.

Actualización del Estado de Carga

Es una buena práctica mostrar un indicador de carga (como un mensaje "Loading...") mientras esperas que los datos de la API estén disponibles. En el ejemplo anterior, el estado loading se utiliza para gestionar este indicador.

Uso de POST y Otros Métodos HTTP

Además de solicitudes GET, es posible que necesites enviar datos a una API utilizando el método POST. Aquí tienes un ejemplo de cómo hacer una solicitud POST con fetch:

jsx

En este ejemplo, usamos el método POST para enviar datos a la API. Se define el cuerpo de la solicitud (body) como una cadena JSON, y se configuran los encabezados HTTP para indicar que se está enviando un contenido JSON.

Uso de Librerías Externas: Axios

Aunque fetch es una API nativa muy poderosa, librerías como Axios ofrecen una sintaxis más simple y algunas características adicionales, como la cancelación de solicitudes y la configuración de respuestas automáticas de JSON. Puedes instalar Axios con el siguiente comando:

bash

Aquí tienes un ejemplo de cómo hacer una solicitud con Axios:

jsx

Axios simplifica el manejo de errores y el análisis de la respuesta en formato JSON, lo que lo hace una buena opción para proyectos que requieren una mayor funcionalidad.

Consideraciones de Rendimiento y Buenas Prácticas

Al realizar solicitudes a una API, es importante considerar el rendimiento y la experiencia del usuario:

1. Evitar Solicitudes Innecesarias: Asegúrate de que las solicitudes a la API se realicen solo cuando sea necesario. Puedes usar dependencias en useEffect para controlar cuándo debe realizarse una solicitud.

2. Manejo de Caching: Para mejorar el rendimiento, considera implementar un sistema de almacenamiento en caché para evitar realizar solicitudes repetidas innecesarias a la API.

3. Control de Solicitudes Pendientes: En casos donde el componente pueda desmontarse antes de que la solicitud se complete, usa técnicas para cancelar solicitudes pendientes con AbortController (para fetch) o la función de cancelación de Axios.

Conclusión

Manejar APIs en React es esencial para la mayoría de las aplicaciones modernas. Ya sea que utilices fetch o una librería externa como Axios, es importante manejar correctamente los estados de carga, errores y respuestas de la API.