Probablemente esté acostumbrado a buscar datos en React usando axios o fetch. El método habitual para manejar la obtención de datos es:
- Realice la llamada a la API.
- Actualice el estado usando la respuesta si todo va según lo planeado.
- O, en los casos en que se encuentran errores, se muestra un mensaje de error al usuario.
Siempre habrá retrasos en el manejo de solicitudes a través de la red. Eso es solo parte del trato cuando se trata de hacer una solicitud y esperar una respuesta. Es por eso que a menudo utilizamos un control giratorio de carga para mostrarle al usuario que se está cargando la respuesta esperada.
Ver la pluma
ojRMaN por Geoff Graham (@geoffgraham)
en CodePen.
Todo esto se puede hacer usando una biblioteca llamada React Async.
React Async es una biblioteca basada en promesas que le permite obtener datos en su aplicación React. Veamos varios ejemplos que utilizan componentes, ganchos y ayudantes para ver cómo podemos implementar estados de carga al realizar solicitudes.
Para este tutorial, usaremos la aplicación Create React. Puede crear un proyecto ejecutando:
npx create-react-app react-async-demoCuando termine, ejecute el comando para instalar React Async en su proyecto, usando yarn o npm:
## yarn
yarn add react-async
## npm
npm install react-async --saveEjemplo 1: Cargadores en componentes
La biblioteca nos permite hacer uso de <Async> directamente en nuestro JSX. Como tal, el ejemplo del componente se verá así;
// Let's import React, our styles and React Async
import React from 'react';
import './App.css';
import Async from 'react-async';
// We'll request user data from this API
const loadUsers = () =>
fetch("https://jsonplaceholder.typicode.com/users")
.then(res => (res.ok ? res : Promise.reject(res)))
.then(res => res.json())
// Our component
function App() {
return (
<div className="container">
<Async promiseFn={loadUsers}>
{({ data, err, isLoading }) => {
if (isLoading) return "Loading..."
if (err) return `Something went wrong: ${err.message}`
if (data)
return (
<div>
<div>
<h2>React Async - Random Users</h2>
</div>
{data.map(user=> (
<div key={user.username} className="row">
<div className="col-md-12">
<p>{user.name}</p>
<p>{user.email}</p>
</div>
</div>
))}
</div>
)
}}
</Async>
</div>
);
}
export default App;Primero, creamos una función llamada loadUsers. Esto hará la llamada a la API usando la API de recuperación. Y, cuando lo hace, devuelve una promesa que se resuelve. Después de eso, los accesorios necesarios se ponen a disposición del componente.
Los accesorios son:
isLoading: Maneja los casos en los que aún no se ha recibido la respuesta del servidor.err: Para los casos en los que se encuentra un error. También puede cambiar el nombre de esto aerror.data: Estos son los datos esperados obtenidos del servidor.
Como puede ver en el ejemplo, devolvemos algo para que se le muestre al usuario dependiendo del accesorio.
Ejemplo 2: cargadores en ganchos
Si eres fanático de los hooks (como deberías), hay una opción de hook disponible cuando trabajas con React Async. Así es como se ve eso:
// Let's import React, our styles and React Async
import React from 'react';
import './App.css';
import { useAsync } from 'react-async';
// Then we'll fetch user data from this API
const loadUsers = async () =>
await fetch("https://jsonplaceholder.typicode.com/users")
.then(res => (res.ok ? res : Promise.reject(res)))
.then(res => res.json())
// Our component
function App() {
const { data, error, isLoading } = useAsync({ promiseFn: loadUsers })
if (isLoading) return "Loading..."
if (error) return `Something went wrong: ${error.message}`
if (data)
// The rendered component
return (
<div className="container">
<div>
<h2>React Async - Random Users</h2>
</div>
{data.map(user=> (
<div key={user.username} className="row">
<div className="col-md-12">
<p>{user.name}</p>
<p>{user.email}</p>
</div>
</div>
))}
</div>
);
}
export default App;Esto es similar al ejemplo del componente, pero en este escenario, estamos haciendo uso de useAsync y no el Async componente. La respuesta devuelve una promesa que se resuelve, y también tenemos acceso a accesorios similares como lo hicimos en el último ejemplo, con los que luego podemos volver a la interfaz de usuario renderizada.
Ejemplo 3: cargadores en ayudantes
Los componentes auxiliares son útiles para hacer que nuestro código sea claro y legible. Estos ayudantes se pueden utilizar cuando se trabaja con un useAsync gancho o con un Async componente, los cuales acabamos de ver. A continuación se muestra un ejemplo del uso de los ayudantes con el Async componente.
// Let's import React, our styles and React Async
import React from 'react';
import './App.css';
import Async from 'react-async';
// This is the API we'll use to request user data
const loadUsers = () =>
fetch("https://jsonplaceholder.typicode.com/users")
.then(res => (res.ok ? res : Promise.reject(res)))
.then(res => res.json())
// Our App component
function App() {
return (
<div className="container">
<Async promiseFn={loadUsers}>
<Async.Loading>Loading...</Async.Loading>
<Async.Fulfilled>
{data => {
return (
<div>
<div>
<h2>React Async - Random Users</h2>
</div>
{data.map(user=> (
<div key={user.username} className="row">
<div className="col-md-12">
<p>{user.name}</p>
<p>{user.email}</p>
</div>
</div>
))}
</div>
)
}}
</Async.Fulfilled>
<Async.Rejected>
{error => `Something went wrong: ${error.message}`}
</Async.Rejected>
</Async>
</div>
);
}
export default App;Esto se parece a cuando usamos accesorios. Una vez hecho esto, puede dividir las diferentes secciones de la aplicación en pequeños componentes.
Conclusión
Si se ha cansado de seguir la ruta que mencioné en la sección de apertura de este tutorial, puede comenzar a hacer React Async en ese proyecto en el que está trabajando. El código fuente utilizado en este tutorial se puede encontrar en sus diferentes ramas en GitHub.