Cuando construimos aplicaciones web con React, es común que tengamos que comunicarnos con una fuente de datos de un servidor web (API).
Aquí es donde la API Fetch nos puede ayudar, ya que es una interfaz para recuperar recursos de la red. Pero, ¿Cómo utilizamos fetch en una aplicación React?
Lo que vas a aprender
La meta de este artículo es mostrarte cómo utilizar la API Fetch en React para poder interactuar con una API.
En particular, aprenderás a utilizar los hooks useState y useEffect para gestionar el estado de los datos que obtengas de la API.
Requisitos
- Familiaridad creando componentes en React.
- Saber lo básico de los siguientes hooks: useState y useEffect.
- Conocimiento básico de fetch y de Promesas en JavaScript.
- Conocimiento general de códigos de estado de respuesta HTTP
Lo que construiremos
Construiremos una aplicación que muestre una imagen de perrito aleatoria obtenida de Dog API:
Al cargar la aplicación vemos un perrito aleatorio.
Esta aplicación tiene las siguientes funcionalidades:
- Cuando la abres por primera vez, te muestra un perrito aleatorio.
- Cuando presionas el botón “Otro ❤️” muestra otro perrito aleatorio.
- Si ocurre algún problema al obtener los datos del perrito, mostrar el error.
Utilizaremos las herramientas que nos ofrece React (useState, useEffect) y el browser (Fetch API).
La base inicial del proyecto la puedes ver en este Codesandbox, el cual es un proyecto en React en blanco donde el único cambio que hice fue agregar una hoja de estilos.
A partir de este proyecto, puedes ir siguiendo los pasos para construir la aplicación.
Cómo está organizado este artículo
Partiremos con una base conceptual, donde veremos qué es Fetch API, cómo utilizarla y cómo manejar errores. Luego nos vamos a ir a la construcción de la aplicación.
Conceptos previos
¿Qué es “Fetch API”?
Fetch API es una interfaz para obtener información de una URL.
Lo bueno es que la mayoría de los navegadores modernos incluyen la función de manera global, por lo que podemos usarla sin necesidad de instalar librerías adicionales en nuestros proyectos, incluso en proyectos con React.
¿Cómo utilizamos “Fetch API”?
Su uso es relativamente sencillo y lo veremos a continuación (puedes ver más detalles en este excelente artículo de MDN).
La Dog API tiene un endpoint que entrega la imagen de un perro random, el cual es https://dog.ceo/api/breeds/image/random. Para hacer una solicitud a este endpoint utilizando fetch podemos usar el siguiente código:
Al ejecutar esto (ver ejemplo en Codesanbox), imprimirá en consola algo parecido a esto:
Siempre que usamos fetch a una API que responde en JSON debemos hacer los mismos pasos:
El llamado de fetch retorna un objeto de tipo Promise, es por eso que tenemos que encadenar un then que se ejecutará una vez fetch haya terminado de obtener el recurso solicitado. A su vez, la línea que transforma a JSON la respuesta también es asíncrona, es por eso que cuando usamos fetch necesitaremos tener dos then, uno para la respuesta y la otra para su transformación a JSON.
¿Cómo manejamos errores con Fetch API?
Cuando realizamos peticiones a un servidor, hay muchas razones por las cuales puede fallar. Puede haber un timeout de la API, o quizás el servicio está caído. A continuación veremos cómo manejar estos errores.
Para este ejemplo, usaremos mock.codes, un servicio que permite probar respuestas HTTP de manera simple. Solo tienes que hacer un request a mock.codes/HTTP_CODE y obtendras una respuesta HTTP con el código solicitado. Por ejemplo, mock.codes/500 te responde con error HTTP 500.
Veamos el siguiente ejemplo:
¿Qué crees que imprime lo anterior?
…
…
…
…
La respuesta es: “Todo bien”.
Esto es un poco contra intuitivo, ya que en realidad la solicitud si falló, pues hubo un error 500. Lo que pasa es que la especificación de fetch dice que la promesa fallará solo si hay fallos de red o si algo impidió completar la solicitud. Para manejar los errores, debemos fijarnos en el atributo ok de la respuesta de fetch, el cual será true para respuestas satisfactorias (códigos 200-299).
Entonces el código debería ser algo así:
O usando la sintaxis de async/await:
Mirando el atributo ok de la respuesta podemos saber si todo salió bien.
Cómo realizar peticiones en React con useEffect
Partiremos implementando la primera funcionalidad:
Cuando abres la aplicación por primera vez, te muestra un perrito aleatorio.
Visualmente:
Al cargar la página, aparece un perrito:
De aquí surge una duda: ¿cómo hacemos que nuestra función espere el resultado de fetch?
Lo que se suele hacer es partir nuestro componente en modo “cargando”, y cuando el resultado de la petición esté listo, actualizamos nuestro componente y mostramos la información que recibimos.
Casi siempre son los mismos pasos, por lo que te presentaré una receta de lo que debemos hacer para lograr esto:
- Inicia tu componente en modo “cargando”
- Luego de que tu componente haya renderizado, haz la petición de datos.
- Cuando la petición de datos haya finalizado, guarda los datos y desactiva el modo “cargando”.
- Asegúrate que cuando tu componente esté en modo cargando muestre un indicador de cargando (un spinner o un texto), y cuando no, que muestre los datos que recibió.
¿Cómo hacemos esto en código?
1) Inicia tu componente en modo “cargando”
Vamos a necesitar una forma de decirle al componente que se encuentra en modo cargando, esto lo podemos hacer con una variable de estado.
Así que podemos tener una primera versión que cumpla con este primer punto:
2) Luego de que tu componente haya renderizado, haz la petición de datos.
Esto es exactamente lo mismo que decir “utiliza useEffect para obtener los datos”, porque ya sabemos que las peticiones de datos debemos hacerlo en un useEffect, y además, la función que le pasamos a useEffect se ejecuta luego de haber renderizado el componente.
Así que el código nos queda de la siguiente manera:
Notar que el segundo argumento de useEffect es un arreglo vacío ([]). Esto lo hago así porque la idea es ejecutar el efecto (llamada a la API) una sola vez (luego del primer renderizado). Si omitimos esto, cada vez que se renderice el componente se volverá a ejecutar el useEffect.
Nota: puedes leer más sobre la importancia del arreglo de dependencias aquí.
3) Cuando la petición de datos haya finalizado, guarda los datos y desactiva el modo “cargando”.
La petición de datos finaliza en la línea donde estamos haciendo el console.log de la respuesta. Así que es ahí donde debemos guardar los datos y desactivar el modo cargando:
Para guardar los datos utilizaremos una nueva variable de estado llamada imageUrl, donde guardaremos la URL de la imagen del perrito a mostrar:
Así que aplicando esto:
4) Mostrar cargando o los datos cuando corresponda
Hasta ahora no nos hemos preocupado del renderizado de nuestro componente. Eso cambiará en unos segundos.
La primera parte de este paso dice: “Asegúrate que cuando tu componente esté en modo cargando muestre un indicador de cargando”.
Eso lo podemos hacer de la siguiente manera:
Como puedes ver, el renderizado ahora es condicional. Cuando está cargando (isLoading es true) veremos un “Cargando…”, mientras que cuando terminó de cargar veremos un “Listo”.
La segunda parte de este paso dice: “y cuando no, que muestre los datos que recibió”. Para esto, en vez de mostrar “Listo”, debemos mostrar la imagen con una etiqueta img:
El código final para nuestra primera funcionalidad:
¡Listo! 😄 Nuestra aplicación de perritos aleatorios está funcionando.
Estos 4 pasos son los típicos que tendremos que hacer cuando queramos hacer una aplicación donde queramos mostrar algún dato que vive en una API. Funciona tanto para obtener datos individuales o lista de datos.
Cómo realizar peticiones a partir de eventos del usuario
Ahora implementaremos la segunda funcionalidad:
Cuando presionas el botón “Otro ❤️” muestra otro perrito aleatorio.
Así que ahora agregaremos un botón que al darle clic recargue la imagen del perrito que mostramos. Partiremos mostrando el botón:
Lo siguiente a implementar es que cuando hagan clic en el botón, debemos recargar la imagen. Si lo piensas bien, esto es lo mismo que hacemos en el useEffect, solo que ahora debemos hacerlo en respuesta al clic del nuevo botón.
Vamos a crear la función que se ejecutará al darle clic al botón:
La implementación de fetchRandomDog podría ser muy parecido a lo que hay en el useEffect:
Esto nos deja el código final así:
Lo cual funciona de maravilla.
Como verás, hay código duplicado en useEffect y fetchRandomDog. Hay varias formas de refactorizar esto, aunque en este caso particular mi favorita es dejar a useEffect como el principal encargado de hacer la petición.
¿Qué pasa si modificamos useEffect de la siguiente manera?
El efecto se ejecutará cada vez que isLoading cambie, aunque solo hará la petición si isLoading es true.
Si pensamos en el primer renderizado, sabemos que isLoading parte como true, entonces este useEffect funcionará igual que antes
Gracias a este cambio, cuando hacemos clic en el botón basta con cambiar el estado de isLoading a true 😎
La versión refactorizada nos queda así:
De esta forma, cuando nuestro componente esté en modo “cargando” sabremos que estará haciendo una petición. Y de pasada, nos ahorramos duplicar código.
¿Cómo manejar errores HTTP en React?
Implementaremos la última funcionalidad:
Si ocurre algún problema al obtener los datos del perrito, mostrar el error.
Cuando llamamos fetch, debemos preocuparnos de los posibles errores, los cuales son dos:
- Algún error que impida realizar la solicitud.
- Algún error de la API.
El primero hace que la Promise retornada por fetch falle, mientras que el segundo no. Sin embargo, en este caso podemos verificar la propiedad ok de la respuesta para saber si todo salió bien.
Por todo esto, un useEffect más robusto, con manejo de estos dos errores lo podríamos implementar así:
El código se vuelve más complejo, pero más robusto. Alternativamente podríamos usar async y await:
Solo nos falta mostrar el mensaje de error (si es que existe). El código final nos queda así:
Recapitulación
En este artículo vimos como crear una aplicación que consume datos de una API para luego mostrarlos, utilizando elementos nativos de React (useState, useEffect) y de los browsers modernos (Fetch API).
Para esto, presentamos la receta típica que debemos seguir:
- Inicia tu componente en modo “cargando”.
- Luego de que tu componente haya renderizado, haz la petición de datos.
- Cuando la petición de datos haya finalizado, guarda los datos y desactiva el modo “cargando”.
- Asegúrate que cuando tu componente esté en modo cargando muestre un indicador de cargando (un spinner o un texto), y cuando no, que muestre los datos que recibió.
También vimos cómo hacer solicitudes luego de ciertos eventos (por ejemplo, luego de un clic). Finalmente cómo manejar errores, ya sea errores relacionados con API o con la solicitud.