Artículo original: How to Fetch Data in React: Cheat Sheet + Examples
Hay muchas formas de recuperar datos de una API externa en React. Pero, ¿cuál debería utilizar para sus aplicaciones en 2021?
En este tutorial, revisaremos cinco de los patrones más utilizados para recuperar datos con React realizando una solicitud HTTP a una API REST.
No solo cubriremos cómo recuperar datos, sino también cómo manejar mejor la carga y el estado de error al recuperar nuestros datos.
¡Empecemos!
Para todos estos ejemplos, usaremos un endpoint del popular JSON Placeholder API, pero puedes usar su propia API que haya creado (como una API de Node con Express) o cualquier otra API pública.
1. Cómo Recuperar Datos en React Usando la API Fetch
La forma más accesible de recuperar datos con React es utilizar la API Fetch.
Fetch API es una herramienta integrada en la mayoría de los navegadores modernos en el objeto window ( window.fetch) y nos permite realizar solicitudes HTTP muy fácilmente utilizando promesas de JavaScript.
Para realizar una solicitud GET simple con fetch solo necesitamos incluir la URL del endpoint al que queremos realizar nuestra solicitud. Queremos realizar esta solicitud una vez que nuestro componente React se haya montado.
Para hacerlo, realizamos nuestra solicitud dentro del hook useEffect y nos aseguramos de proporcionar un arreglo de dependencias vacía como segundo argumento, de modo que nuestra solicitud solo se realice una vez (asumiendo que no depende de ningún otro dato en nuestro componente).
En el primer callback .then(), verificamos si la respuesta fue correcta ( response.ok). Si es así, devolvemos nuestra respuesta para pasar a la siguiente, luego volvemos a llamar como datos JSON, ya que esos son los datos que obtendremos de nuestra API de usuario aleatorio.
Si no es una respuesta correcta, asumimos que hubo un error al realizar la solicitud. Al usar fetch, necesitamos manejar los errores nosotros mismos, por lo que lo arrojamos responsecomo un error para que nuestro callback catch lo maneje.
Aquí, en nuestro ejemplo, colocamos nuestros datos de error en el estado con setError. Si hay un error, devolvemos el texto "¡Error!".
Tenga en cuenta que también puede mostrar un mensaje de error del objeto de error que pusimos en estado usando error.message.Usamos el callback .finally() como función que se llama cuando nuestra promesa se resolvió exitosamente o no. En él, lo configuramos loadingen falso, para que ya no veamos nuestro texto de carga.
En su lugar, vemos nuestros datos en la página si la solicitud se realizó correctamente o si hubo un error al realizar la solicitud.
2. Cómo Recuperar Datos en React Usando Axios
El segundo enfoque para realizar solicitudes con React es utilizar la librería axios.
En este ejemplo, simplemente revisaremos nuestro ejemplo de Fetch instalando primero axiosusando npm:
npm install axiosLuego lo importaremos en la parte superior de nuestro archivo de componente.
Lo que axios nos permite hacer es usar exactamente la misma sintaxis de promesa que fetch, pero en lugar de usar nuestra devolución de llamada primero y luego para determinar manualmente si la respuesta es correcta y arrojar un error, axios se encarga de eso por nosotros.
Además, nos permite en esa primera devolución de llamada obtener los datos JSON de response.data.
Lo conveniente de usar axios es que tiene una sintaxis mucho más corta que nos permite reducir nuestro código e incluye muchas herramientas y características que Fetch no tiene en su API.
Todas estas razones son las que se han convertido en la librería HTTP de referencia para los desarrolladores de React.
3. Cómo recuperar datos en React Usando la Sintaxis async/await
En ES7, fue posible resolver promesas utilizando la sintaxis async / await.
El beneficio de esto es que nos permite eliminar los callback .then(), .catch()y .finally() simplemente recupera nuestros datos resueltos asincrónicamente como si estuviéramos escribiendo código síncrono sin ninguna promesa.
En otras palabras, no tenemos que depender de devoluciones de llamada cuando usamos async/await con React.
Tenemos que ser conscientes del hecho de que cuando usamos useEffect, la función de efecto (el primer argumento) no puede convertirse en una async función.
Si echamos un vistazo al error de linting que nos da React si estábamos usando Create React App para construir nuestro proyecto, se nos dirá que esta función no puede ser asincrónica para evitar condiciones de carrera.
Como resultado, en lugar de hacer que esa función sea asíncrona, simplemente podemos crear una función asíncrona separada en nuestro componente, a la que podemos llamar sincrónicamente. Es decir, sin la palabra clave await delante.
En este ejemplo, creamos una función asíncrona llamada getData. Al llamarlo sincrónicamente dentro de useEffect, podemos recuperar nuestros datos como esperábamos.
4. Cómo Recuperar Datos en React Usando un Hook de React Personalizado (useFetch)
Con el tiempo, es posible que te des cuenta de que se vuelve un poco tedioso y lleva mucho tiempo seguir escribiendo el hook useEffect con todo su texto estándar dentro de cada componente en el que desea recuperar datos.
Para reducir nuestro código reutilizado, podemos usar un hook personalizado como una abstracción especial, que podemos escribir nosotros mismos desde una librería de terceros (como estamos aquí, usando la librería react-fetch-hook).
Un hook personalizado que realiza nuestra solicitud HTTP nos permite hacer que nuestros componentes sean mucho más concisos. Todo lo que tenemos que hacer es llamar a nuestro hook en la parte superior de nuestro componente.
En este caso, recuperamos todos los datos, la carga y el estado de error que necesitamos para poder usar la misma estructura para nuestro componente que antes, pero sin tener que hacerlo con useEffect. Además, ya no necesitamos escribir imperativamente cómo resolver nuestra promesa de nuestra solicitud GET cada vez que queremos realizar una solicitud.
5. Cómo Recuperar Datos en React Usando la Librería React Query
El uso de hooks personalizados es una excelente manera de escribir solicitudes HTTP mucho más concisas para obtener nuestros datos y todo su estado relacionado. Pero una librería que realmente lleva la recuperación de datos con hooks al siguiente nivel es React Query.
React Query no solo nos permite usar hooks personalizados que podemos reutilizar en nuestros componentes de manera concisa, sino que también nos brinda una gran cantidad de herramientas de administración de estado para poder controlar cuándo, cómo y con qué frecuencia se obtienen nuestros datos.
En particular, React query nos proporciona un caché, que puede ver a continuación a través de React Query Devtools. Esto nos permite gestionar fácilmente las solicitudes que hemos realizado según el valor clave que especificamos para cada solicitud.
Para las solicitudes siguientes, nuestra consulta de datos de usuario aleatorios se identifica mediante la cadena 'random-user' (proporcionada como primer argumento de useQuery).
Al hacer referencia a esa clave, podemos hacer cosas poderosas como recuperar, validar o restablecer nuestras diversas consultas.
Si confiamos en nuestra solución de hook personalizada o useEffect, recuperaremos nuestros datos cada vez que se monte nuestro componente. En la mayoría de los casos, hacer esto es innecesario. Si nuestro estado externo no ha cambiado, idealmente no deberíamos tener que mostrar el estado de carga cada vez que mostramos nuestro componente.
React Query mejora enormemente nuestra experiencia de usuario al intentar servir nuestros datos desde su caché primero y luego actualizar los datos en segundo plano para mostrar los cambios si el estado de nuestra API ha cambiado.
También nos brinda un arsenal de herramientas poderosas para administrar mejor nuestras solicitudes de acuerdo con cómo cambian nuestros datos a través de nuestra solicitud.
Por ejemplo, si nuestra aplicación nos permitió agregar un usuario diferente, es posible que queramos recuperar esa consulta una vez que se agregó el usuario. Si supiéramos que la consulta se cambia con mucha frecuencia, es posible que deseemos especificar que se actualice aproximadamente cada minuto. O para actualizarse cada vez que el usuario enfoque la pestaña de su ventana.
En resumen, React Query es la solución ideal no solo para realizar solicitudes de manera concisa, sino también para administrar de manera eficiente y efectiva los datos que se devuelven para nuestras solicitudes HTTP en todos los componentes de nuestra aplicación.
¿Quiere conservar esta guía para consultarla en el futuro?
Aquí hay 3 ganancias rápidas que obtienes cuando obtienes la versión descargable:
- Obtendrá toneladas de fragmentos de código copiables para reutilizarlos fácilmente en sus propios proyectos.
- Es una excelente guía de referencia para fortalecer tus habilidades como desarrollador de React y para entrevistas de trabajo.
- Puede llevar, utilizar, imprimir, leer y releer esta guía literalmente donde quiera.
Conviértete en un Desarrollador Profesional de React
React es difícil. No deberías tener que resolverlo tú mismo.
He reunido todo lo que sé sobre React en un solo curso para ayudarte a alcanzar tus objetivos en un tiempo récord:
Presentamos: El Bootcamp de React
Es el único curso que desearía tener cuando comencé a aprender React.
Haga clic a continuación para probar React Bootcamp usted mismo:
