Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Crea una cuenta y continúa aprendiendo 🚀
Regístrate o inicia sesión para continuar aprendiendo:
Frontend
Aprendiz
Importancia & Fetch Products
Veamos por qué es importante solicitar nuestra data a través de peticiones HTTP en vez de incluirla como parte de nuestros assets js. Así mismo, veamos cómo usar Fetch.
Problema con la carga de datos en HomeView
Tal como comentamos en la lección anterior, nuestro componente HomeView actualmente incluye toda la data de nuestros productos.
Esto funciona muy bien cuando tenemos pocos productos.
Sin embargo, si queremos dar soporte a una tienda que tiene miles y miles de productos, eso haría que nuestro componente HomeView ocupe mucho espacio y por lo tanto tarde en descargarse.
Si un componente de nuestro sitio tarda mucho en descargarse, podría pasar que nuestra página se vea incompleta y el usuario no entienda qué es lo que está ocurriendo.
Si de pronto HomeView no carga, nada de esta sección se vería.
Toda esta parte no cargaría durante bastante tiempo y eso daría una mala experiencia de usuario.
Recomendación: separar la fuente de datos
Por eso, lo que generalmente se recomienda es tener una fuente de datos por separado de nuestra aplicación cliente.
Cuando digo “aplicación cliente” me refiero a nuestro proyecto de Vue, a nuestro proyecto Frontend.
Cuando un usuario visita una página, lo primero que se descarga es el HTML.
El HTML incluye código JavaScript (en este caso con Vue), que incluye código CSS con nuestros estilos.
Sin embargo, si el código JavaScript incluye data y es mucha data la que se descarga, este código va a tardar mucho en descargarse.
Eso va a afectar la experiencia de usuario, porque es muy posible que una gran parte de nuestro proyecto no se visualice.
La data está incluida dentro del archivo JavaScript, y hasta que un archivo no se descargue completamente, el navegador no puede empezar a ejecutarlo.
Solución: cargar data bajo demanda
Lo recomendable es tener archivos JavaScript ligeros que descarguen la data bajo demanda.
Que descarguen los datos conforme el usuario navega.
Por ejemplo, hemos visto que:
- Cuando visitamos la ruta de
Cartse descarga reciénCartView. - Cuando visitamos la ruta de
Homese descargaHomeView.
Sin embargo, HomeView incluye la data de los productos.
Lo recomendable sería que HomeView haga una petición para obtener los productos a partir de una fuente de datos.
Implementación paso a paso
1. Detener servidor local y correr con npm run dev
Vamos a usar npm run dev para ver los cambios durante el desarrollo.
2. Revisar importaciones actuales
Vamos a src y revisamos cómo funciona la importación de los datos:
-
categoriesimportadatadesde un archivo JSON. -
store de productsimportadatade productos.
La data importada es usada para definir el estado inicial del store.
Cada vez que vemos un import de esta manera, se construye al momento de compilar.
Ejemplo:
-
producthaceimportdeproductData. -
HomeViewhaceimportdeproductsList. -
productsListhaceimportdelstorede productos.
Esto explica por qué el asset de HomeView termina incluyendo la data de los productos.
Los import se resuelven y generan un archivo JavaScript conveniente.
Sin embargo, si tuviésemos miles de productos, toda esa data sería agregada a HomeView.
La vista home tardaría en descargar.
3. Nueva estrategia: petición por separado
Vamos a tener la data separada, sin importarla al inicio.
En vez de un import, haremos una petición get para descargar la información.
La información empezará vacía y se descargará luego de cargar HomeView.
También haremos lo mismo con las categorías.
4. Uso de mounted
Vamos a usar el hook mounted.
Nos dirigimos a HomeView y agregamos un método mounted.
Agregamos un console.log('mounted').
Una vez que se pinta HomeView, aparece el mensaje en consola.
Ahí podemos poner nuestra petición para descargar la data.
5. Crear acción fetchProducts en el store
No ubicamos la petición en el componente, sino como una acción en el store.
Ejemplo:
const productsStore = useProductsStore();
await productsStore.fetchProducts();
Agregamos una nueva acción: fetchProducts.
Esta acción:
- No necesita argumentos.
- Usa
fetchpara obtener un JSON. - Parsea la respuesta con
.json(). - Imprime la data con
console.log.
6. Hacer datos públicos
Para poder hacer una petición, el recurso debe ser público.
Desplazamos la carpeta data a public.
Ahora podemos consultar /data/products.json.
Hacemos el request y mostramos la data.
7. Verificación
Guardamos los cambios.
Actualizamos y vemos el console.log con la información de los productos.
En el panel de Network, filtramos por fetch.
Vemos una petición a /data/products.json.
La petición se realiza sobre el mismo dominio.
El archivo JSON contiene la data, consumida con get.
8. Asignar data al estado
Luego de recibir la data, la asignamos con:
this._products = data;
Actualizamos.
Los productos ya se muestran.
El request se inicia después de cargar HomeView.
Esto mejora la experiencia de usuario para conexiones lentas.
Esta lección cuenta con 1 recursos adicionales:
Tal como comentamos en la lección anterior, nuestro componente “HomeView” actualmente incluye toda la data de nuestros productos. Esto funciona muy bien cuando tenemos pocos productos. Sin embargo, si queremos dar soporte a una tienda que tiene miles y miles de productos, eso haría que nuestro componente “HomeView” ocupe mucho espacio y por lo tanto tarde en descargarse. Si un componente de nuestro sitio tarda mucho en descargarse, podría pasar que nuestra página se vea incompleta y el usuario no entienda que es lo que está ocurriendo. Si de pronto “HomeView” no carga nada de esta sección se vería. Toda esta parte no cargaría durante bastante tiempo y eso daría una mala experiencia de usuario. Por eso, lo que generalmente se recomienda es tener una fuente de datos por separado de nuestra aplicación cliente. Cuando digo “aplicación cliente” me refiero a nuestro proyecto de Vue, a nuestro proyecto Frontend. Cuando un usuario visita una página, lo primero que se descarga hemos visto que es el HTML. El HTML incluye código JavaScript, en este caso con Vue, que incluye código CSS con nuestros estilos. Sin embargo, si el código JavaScript incluye data y es mucha data la que se descarga, este código JavaScript va a tardar mucho en descargarse y eso va a afectar al experiencia de usuario, porque es muy posible que una gran parte de nuestro proyecto no se visualice, ya que la data está incluida dentro del archivo de JavaScript y hasta que un archivo no se descargue completamente, el navegador no puede empezar a ejecutarlo. Es por eso que lo recomendable es tener archivos JavaScript ligeros que descarguen la data bajo demanda, que descarguen los datos conforme el usuario navega. Por ejemplo, hemos visto que cuando visitamos la ruta de “Cart” se descarga recién “CartView”. Cuando visitamos la ruta de “Home” se descarga “HomeView”, sin embargo “HomeView” incluye la data de los productos. Lo recomendable sería que “HomeView” haga una petición para obtener los productos a partir de una fuente de datos. Entonces eso es lo que vamos a hacer en esta lección. Vamos a hacer que “HomeView” no incluya la data de los productos, sino que la solicite. ¿De qué manera podemos lograr ello? Primero que todo, vamos a detener aquí nuestro servidor local y vamos a usar “npm run dev” para que vayamos viendo nuestros cambios en el navegador durante el desarrollo. Nos dirigimos a nuestra carpeta “src” y desde aquí vamos a revisar cómo funciona actualmente la importación de nuestros datos. La importación la estamos haciendo desde los stores correspondientes, por ejemplo. “categories” importa a “data” desde un archivo json con esta línea y el “store de products” importa “data” de productos con esta línea. Luego la data importada es usada para definir el estado inicial del store. En ambos casos. Cada vez que nosotros vemos un “import” de esta manera se trata de un import que se va a construir al momento de compilar nuestro proyecto. Así como “product” hace “import” de “productData”. Hemos visto que nuestro componente “HomeView” hace “import” de “productsList” y “productList” hemos visto que hace “import” del “store” de productos. Por eso es que cuando descargamos el componente “HomeView”, éste terminaba incluyendo al componente “productList” y terminaba incluyendo al “sotre” y terminaba incluyendo a la “data” de los productos. Esa es la explicación de por qué el asset de “HomeView” termina incluyendo la data de los productos. Porque estos “import” al final se resuelven y generan un archivo JavaScript conveniente para que el usuario no esté descargando varios archivos, sino más bien uno solo con lo que se necesita. Ahora en cambio vamos a cambiarle la estrategia que tenemos actualmente, el store, importa la data de los productos y a pesar que nosotros vemos la data en un archivo separado, de igual manera se está juntando al momento de compilar y se está descargando todo como parte de un archivo “HomeView”. Si tuviésemos miles de productos, la data de igual manera sería agregada a “HomeView” y toda nuestra vista “home” en general tardaría en descargar. Por eso lo que vamos a hacer ahora es tener la data separada, pero no importarla e incluirla desde el inicio, sino que vamos a hacer un request por separado para descargar la información y finalmente mostrarla. Dicho de otra forma, no vamos a hacer un “import”, sino que más bien vamos a hacer una petición “get” para descargar los datos Cuando el usuario visita nuestra página luego de que ya hemos cargado “HomeView” y luego de que ya estamos mostrando al menos el componente usuario. Entonces la información de los productos empezará vacía. Haremos lo mismo con las categorías. No hay ningún import y la data de las categorías empieza como un arreglo vacío. Si nosotros actualizamos, vemos que no hay “categorías” y vemos que no hay “productos”. Así va a empezar nuestro proyecto porque no se van a tener datos, pero ya estamos mostrando algo. “HomeView” ya está cargando, y una vez que cargue “HomeView” vamos a empezar a descargar la información de los productos. ¿Cómo podemos empezar a descargar datos, luego que un componente ha cargado?, Podemos hacerlo a través de un “hook”. Vamos a usar en este caso el hook “mounted”. Entonces nos vamos a dirigir a “HomeView” y vamos a agregar por aquí un método “mounted”. Vamos a agregar un “console.log” y vamos a imprimir el texto mounted. Para volver a la normalidad vamos a quitar el “throttling” y este check de “disable volcage” que habíamos puesto. Nos dirigimos a la consola y como vemos, tenemos aquí el mensaje de mounted. Si actualizamos una vez que se pinta el componente “HomeView”, aparece este console.log. Entonces aquí nosotros podemos poner nuestra petición y descargar la data. Cuando es más conveniente. Entonces, ¿de qué manera podemos descargar los datos? Los datos tenemos que descargarlos a través de una petición get, pero la petición no la vamos a ubicar en el componente, sino que vamos a definirlo como una acción en nuestro store. Este “HomeView” se va a encargar entonces de cargar la información de los productos. Por ejemplo, vamos a acceder en este caso a el store de productos de esta manera. Vamos a invocar a “useProductsStore” para obtener una referencia del store, y luego desde este “productsStore” vamos a invocar a una acción. Actualmente tenemos acciones como “orderByName”, “selectCategory”, vamos a agregar un nuevo tipo de acción. Una acción que va a descargar data. Lo vamos a llamar “fetchProducts”. “fetchProducts” se va encargar de traer productos a partir de un request. Entonces aquí en nuestro listado de acciones, vamos a agregar “fetchProducts”. No necesitamos ningún argumento en este caso, simplemente vamos a hacer una petición con fetch. Aquí nosotros indicamos cuál es la URL con el recurso que queremos consumir y luego nosotros vamos a parsear la respuesta para obtenerla en formato json y finalmente vamos a imprimir, por ahora a través de un “console.log” la data que estamos recibiendo. Esta función fetch está disponible en JavaScript sin instalar ninguna biblioteca y nos permite hacer una petición get a una URL para obtener datos a partir de ella. En este caso, la URL va a ser un recurso de un archivo json. Podría tratarse de una API. Podría tratarse de un web service. En nuestro caso, queremos simplemente consumir información de un archivo json. Para poder hacer una petición necesitamos que este recurso sea un recurso público. Por lo tanto, en este caso nos conviene desplazar nuestra carpeta “data” a “public”. Anteriormente, cuando hacíamos un “import”, convenía tener data dentro de la carpeta “src” para que esa data no sea pública. Pero ahora, en cambio, queremos lo contrario. Queremos que esté en “public” para poder consultar la data y luego de consultarla, poder mostrarla. Si ponemos la carpeta “data” dentro de “public”, significa que nosotros vamos a poder consultar la ruta “/data/products.json”. Vamos a hacer un request a esta URL. Vamos a leer su contenido y vamos a imprimir la data que recibimos a través de un “console.log”. Entonces, hasta aquí vamos a guardar nuestros cambios para ver qué es lo que ocurre. Actualizamos. Como vemos, está llamando a “mounted” y justo aquí debajo tenemos un “console.log” con la información de los productos. Esta información se está obteniendo a través de un request. Si nos vamos al “Network”, podemos ver todos los request que hace una página. En este caso, vamos a filtrar y vamos a darle clic a la opción que dice “fetch” solamente para ver las peticiones asíncronas que estamos definiendo. En este caso se está haciendo una petición a esta URL nos dice. Esta URL es “/data/products.json”. Cuando nosotros usamos “/data/products.json”. La petición se realiza sobre el mismo dominio en el que nos encontramos. Por eso es que nuestro propio servidor es el que nos está dando acceso a este recurso. Este archivo json contiene la data y nosotros estamos consumiendo la información a través de una petición “get”, luego que hemos obtenido una respuesta, estamos imprimiendo por consola dicha data. Esto funciona luego de recibir la data desde nuestro “servidor” entre comillas. O sea, a partir de este recurso vamos a asignar esta data a nuestro estado. Entonces usamos “this._products=data”. De esta manera, al completar este request, asignaremos la información a nuestro estado y nuestro proyecto tendrá disponible la información de los productos. Vamos entonces a actualizar. En este caso, como vemos, los productos ya se muestran. Sin embargo, este request que solicitan los productos, se inicia luego que ya cargó “HomeView”, no antes. Se inicia cuando “HomeView” invoca al método “mounted”. Esto brinda una mejor experiencia de usuario para conexiones lentas porque solo luego de cargar la base de “HomeView” estamos iniciando la descarga de la data de los productos.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript