I. Introducción
La obtención de datos es un aspecto central de cualquier aplicación de reacción. Es importante que los desarrolladores de React comprendan los diferentes métodos de obtención de datos y qué casos de uso son mejores para ellos.
Pero primero, comprendamos las promesas de JavaScript.
En resumen, una promesa es un objeto JavaScript que generará un valor en algún momento en el futuro. Esto suele aplicarse a operaciones asincrónicas (como la obtención de datos).
Las promesas tienen tres estados:
- Pendiente: donde la promesa aún está en progreso
- Cumplido: donde la promesa se resuelve exitosamente y devuelve un valor
- Rechazado: la promesa falló con un error
Si una promesa se cumple o se rechaza, se resuelve. Las promesas tienen diferentes métodos para hacer diferentes cosas según el resultado. Estos métodos se analizan con más detalle en la siguiente sección.
2. Utilice el método Promise para obtener la API.
La API Fetch proporciona un método fetch() global que permite a los desarrolladores recuperar datos de forma sencilla. Antes de fetch(), el enfoque tradicional era utilizar XMLHttpRequest(). (Este método no se trata en este artículo, ya que fetch() ha sido reemplazado por un conjunto de funciones más potente y flexible).
El método fetch() toma un parámetro, la URL a solicitar, y devuelve una promesa. Las segundas opciones de parámetros opcionales son una matriz de propiedades. El valor de retorno de fetch() puede ser JSON o XML (una matriz de objetos o un solo objeto). Sin argumento de opciones, fetch() siempre realizará una solicitud GET.
El primer método es el que normalmente verá en casos de uso simples de obtención de datos y, a menudo, es el primer resultado al explorar la documentación de la API.
Como se mencionó anteriormente, obtenemos datos de una API que devuelve una imagen aleatoria de un perro y representamos esa imagen en la pantalla. Antes de realizar la solicitud, empaquetamos el código en un useEffecthook con una matriz de dependencias vacía, de modo que el método fetch() solo se ejecute cuando el componente esté montado inicialmente.
useEffect(() => {
fetch(URL)
// syntax for handling promises
.then((res) => {
// check to see if response is okay
if (res.ok) {
// if okay, take JSON and parse to JavaScript object
return res.json();
}
throw res;
})
// .json() returns a promise as well
.then((data) => {
console.log(data);
// setting response as the data state
setData(data);
})
// if res is not okay the res is thrown here for error
.catch((err) => {
console.error(`Error: ${err}`);
// setting the error state
setError(err);
})
// regardless if promise resolves successfully or not we remove loading state
.finally(() => {
setLoading ( false );
});
}, []);En el ejemplo anterior, llamamos al método y le pasamos la URL del punto final de la API. En este método, usamos el método del objeto de promesa (recuerde que devuelve una promesa).
Usamos este método y pasamos una función de devolución de llamada para verificar si la respuesta es correcta. Si la respuesta es correcta, tomamos los datos JSON devueltos y usamos este método para analizarlos en un objeto JavaScript. Si la respuesta no es normal, informaremos de un error.
Dado que el método .json() también devuelve una promesa, podemos encadenar otro .then() y pasar una función para establecer el estado de los datos, que luego se usa en otra parte del componente. En nuestro ejemplo, la API externa devuelve un objeto con una propiedad de URL (que se utilizará como imagen de búsqueda).
Continuando con la cadena, la siguiente parte es .catch() para organizar la llamada de una función cuando se rechaza la promesa. Esto también devuelve otra promesa, que luego podemos encadenar. Finalmente () se llamará independientemente de si la promesa se resuelve (resuelve o rechaza).
Este método .finally() nos permite evitar la duplicación de código en .then() y .catch() , lo que lo convierte en un buen lugar para eliminar el estado de carga en nuestro ejemplo.
3. Biblioteca Axios con método Promesa
Axios es una popular biblioteca cliente HTTP para la obtención de datos eficiente. Se puede instalar fácilmente en aplicaciones React a través de npm u otros administradores de paquetes. Usar Axios es una alternativa a Fetch API, que tiene algunas ventajas si no te importa instalar bibliotecas externas.
El segundo ejemplo será muy similar al código del primer ejemplo y utilizará el mismo método de promesa para manejar el estado y la respuesta de la promesa.
Después de recuperar () la biblioteca Axios en nuestro componente, podemos usar axios.get (), un método que pasará la URL a nuestro punto final API externo.
Esto devuelve una Promesa, por lo que podemos adoptar el mismo enfoque que el encadenamiento del método Promise.
useEffect(() => {
axios.get(URL)
// syntax for handling promises
.then((res) => {
console.log(res.data);
// axios converts json to object for us (shortens our code)
setData(res.data);
})
// axios takes care of error handling for us instead of checking manually
.catch((err) => {
console.error(`Error: ${err}`);
// setting the error state
setError(err);
})
// regardless if promise resolves successfully or not we remove loading state
.finally(() => {
setLoading ( false );
});
}, []);La diferencia obvia entre el código para Fetch API y este método de Axios es que con Axios solo necesitamos uno porque Axios convierte el JSON .then() en objetos JavaScript para nosotros (acortando nuestro código).
Además, ya no escribimos condiciones para generar errores manualmente, porque axios generará errores en el rango 400 y 500 (nuevamente acortando nuestro código).
4. Función asincrónica (async/await)
En este ejemplo, abandonaremos el encadenamiento de promesas que utilizamos en los dos ejemplos anteriores y, en su lugar, introduciremos un enfoque más moderno para escribir código asincrónico basado en promesas.
Este enfoque se puede utilizar con cualquier mecanismo de recuperación de su elección, pero para este ejemplo nos quedaremos con la biblioteca Axios.
El tercer ejemplo configura el componente de manera similar al ejemplo anterior importando la biblioteca Axios y luego empaquetando el código para obtener los datos en useEffecta con una matriz de dependencias vacía.
En useEffect usamos la palabra clave async para crear una función asincrónica, luego dentro de esa función tenemos tres partes separadas: try, catch y finalmente.
Este enfoque try/catch se utiliza para manejar errores en JavaScript. El código dentro del bloque try se ejecuta primero; si se produce algún error, será "captado" en el bloque, capturará y ejecutará el código interno.
Finalmente, un bloque final siempre se ejecutará después de que el flujo haya pasado por try/catch.
useEffect(() => {
// create async function b/c cannot use async in useEffect arg cb
const fetchData = async () => {
// with async/await use the try catch block syntax for handling
try {
// using await to make async code look sync and shorten
const res = await axios.get(URL);
setData(res.data);
} catch (err) {
console.error(`Error: ${err}`);
// setting the error state
setError(err);
} finally {
setLoading ( false );
}
};
fetchData ();
}, []);En este ejemplo, el bloque try crea una variable denominada res (abreviatura de respuesta) que utiliza la palabra clave async. Esto permite que el código parezca sincrónico (más corto y agradable a la vista).
En este ejemplo, axios.get(URL) está "esperando" hasta que se estabilice. Si se cumple la promesa, configuramos los datos en el estado. Si la promesa es rechazada (arroja un error), ingresa al bloque catch.
5. Cree un gancho de reacción personalizado "useFetch"
Un cuarto enfoque es crear nuestro propio gancho React personalizado que llame a useFetchit y que pueda reutilizarse en diferentes componentes de nuestra aplicación y eliminar el código de recuperación torpe de cada componente.
En realidad, este ejemplo simplemente toma el cuarto ejemplo (usando las mismas técnicas de la biblioteca Axios y async/await) y mueve ese código a su propio enlace personalizado.
Para hacer esto, creamos una función llamada useFetch.js. Luego agregamos todo el código del ejemplo anterior con los diferentes estados que estamos rastreando en la función useFetch usando un efecto.
Finalmente, esta función devolverá un objeto que contiene cada estado y luego usará Fetch para acceder a donde se llama el gancho. Nuestro useFetchhook también aceptará un parámetro, la URL, para permitir una mayor reutilización y la posibilidad de realizar solicitudes de recuperación a diferentes puntos finales.
const useFetch = (url) => {
const [data, setData] = useState(null);
const [ loading , setLoading ] = useState ( true );
const [error, setError] = useState(null);
useEffect(() => {
// create async function b/c cannot use asyc in useEffect arg cb
const fetchData = async () => {
// with async/await use the try catch block syntax for handling
try {
// using await to make async code look sync and shorten
const res = await axios.get(url);
setData(res.data);
} catch (err) {
console.error(`Error: ${err}`);
// setting the error state
setError(err);
} finally {
setLoading ( false );
}
};
fetchData ();
}, []);
return {
data,
loading,
error,
};
};Finalmente, importamos este nuevo gancho personalizado al componente que lo usará y lo llamamos como cualquier otro gancho de React. Como puede ver, esto mejora enormemente la legibilidad del código y acorta nuestro componente.
El punto final de este enfoque es que también puede instalar bibliotecas externas en lugar de crear sus propios enlaces personalizados. Una biblioteca popular reaccionar-fetch-hook tiene una funcionalidad muy similar al gancho que acabamos de crear.
6. Reaccionar biblioteca de consultas
Una de las formas más modernas y poderosas de recuperar datos en React es mediante la biblioteca React Query. Hace mucho más que una simple recuperación de datos, pero para este ejemplo, aprenderemos cómo recuperar datos de la misma API externa de ejemplo.
Una vez instalado e importado, React Query proporciona una serie de ganchos personalizados que se pueden reutilizar en nuestros componentes de una manera muy limpia.
En este ejemplo, importamos QueryClient desde él, luego empaquetamos nuestra aplicación con un proveedor y pasamos la instancia de QueryClientProvider como una propiedad al contenedor.
Esto nos permite utilizar la biblioteca en nuestra aplicación.
Para realizar esta solicitud GET simple, importamos y usamos useQueryhooks. A diferencia del ejemplo anterior que utiliza un enlace personalizado, pasamos dos parámetros.
El primer parámetro requerido es queryKey, que se utiliza como clave de referencia para esta consulta específica.
El segundo parámetro requerido es queryFn, que es la función que utilizará la consulta para solicitar datos.
En lugar de simplemente pasar una URL simple como en nuestro ejemplo anterior de enlace personalizado, usaremos esta función de consulta y luego usaremos la API Fetch y la sintaxis del método de promesa para la búsqueda inicial. (Este enlace tiene muchos otros parámetros opcionales).
const { isLoading, error, data } = useQuery("dogData", () => fetch(URL).then((res) => res.json()));isLoading Desde aquí, React Query hará todo el trabajo adicional detrás de escena, en este caso podemos llamar datos de destrucción, error y uso en nuestra aplicación desde este enlace, aunque también podemos acceder a muchos otros valores.
En un ejemplo más amplio que nuestro ejemplo actual de Dog Image API, el poder y las ventajas de usar React Query son evidentes. Algunas características adicionales a mencionar incluyen: almacenamiento en caché, actualización de datos "obsoletos" en segundo plano y otros beneficios relacionados con el rendimiento.
7. Consulta RTK del kit de herramientas Redux
El último método de este artículo es utilizar la consulta RTK de Redux Toolkit para la recopilación de datos. Es muy común que las aplicaciones utilicen Redux para la gestión del estado.
Si su empresa o su proyecto paralelo actual utiliza Redux, una buena opción es utilizar consultas RTK para recuperar datos, ya que ofrece simplicidad y beneficios similares a las consultas de React.
Para comenzar a usar consultas RTK dondequiera que esté almacenado su código Redux, cree un archivo rtkQueryService.js para configurar la recuperación de datos.
Una vez creado, agrega el servicio a su tienda Redux; suponiendo que ya esté usando Redux, ya tendrá un componente de tienda <Provider> que contiene su aplicación.
Desde aquí, es muy similar a usar un enlace personalizado con un método React Query, usted importa y luego usa el enlace de consulta y desestructura los datos, los errores y luego la carga se puede usar en sus componentes.
const { data, error, isLoading } = useGetDogQuery();Como puede ver, Redux tiene muchas configuraciones, por lo que este podría no ser el mejor enfoque para nuestro caso de uso, pero si ya está usando Redux en una aplicación React y desea una forma simple y moderna de obtener datos, consultas RTK. podría ser genial Stick tiene un gran valor y también ofrece beneficios como el almacenamiento en caché.
pensamientos finales
Si has llegado hasta aquí, ¡enhorabuena! El propósito de este artículo es presentar algunos métodos diferentes de obtención de datos para quienes aprenden React.
En este artículo, presenté 6 métodos. Espero que estos 6 métodos te sean útiles y espero que puedas aprender algo nuevo de ellos.
Además, existen otros métodos actuales de obtención de datos que no se tratan en esta publicación, y estoy seguro de que surgirán otros a medida que crezca el ecosistema de React. Dicho esto, creo que este artículo proporciona una base sólida para comprender este campo.
Expansión de contenido relacionado: (Frontera técnica)
En los últimos 10 años, cuando incluso las empresas tradicionales comenzaron a digitalizarse a gran escala, descubrimos que en el proceso de desarrollo de herramientas internas se repetían constantemente una gran cantidad de páginas, escenas, componentes, etc. La rueda hizo perder mucho tiempo a los ingenieros.
En respuesta a tales problemas, el código bajo visualiza ciertos escenarios y procesos recurrentes en componentes individuales, API e interfaces de bases de datos, evitando la creación repetida de ruedas. Productividad del programador muy mejorada.
Recomiende una plataforma de desarrollo rápido de software JNPF que los programadores deben conocer, adopta la arquitectura de microservicio SpringBoot líder en la industria, admite el modo SpringCloud, mejora la base de expansión de la plataforma y satisface las necesidades de desarrollo rápido del sistema, expansión flexible, integración perfecta y alta Capacidades integrales, como aplicaciones de rendimiento; al adoptar el modo de separación de front-end y back-end, los desarrolladores de front-end y back-end pueden trabajar juntos para ser responsables de diferentes secciones, ahorrando problemas y conveniencia.
Sitio web oficial de prueba gratuita: https://www.jnpfsoft.com/?csdn
Si no ha comprendido la tecnología de código bajo, ¡puede experimentarla y aprenderla rápidamente!