Crea una cuenta y continúa aprendiendo 🚀

Regístrate o inicia sesión para continuar aprendiendo:

Frontend Aprendiz

Fetch Categories

Luego de ver cómo cargar los productos a través de una petición GET, hagamos lo mismo para cargar las categorías.

Uso de fetch para categorías

En la lección anterior hemos hecho uso de fetch para descargar los productos a través de una petición HTTP.

Vamos a aplicar ahora la misma idea para las categorías.

Acción en el store de categorías

Vamos a definir una acción en el store de categories.

Vamos a agregar una acción que se va a llamar fetchCategories.

Vamos a leer la data haciendo un request a /data/categories.json.

Una vez que obtengamos una respuesta válida con formato json, vamos a asignar esta data a nuestro estado a través de this.categories.

Eliminación de getters

No necesitamos getters para las categorías.

Por lo tanto, podemos eliminar este atributo.

Quedándonos de esta manera nuestro store.

Invocación de la acción

Aquí hemos definido una acción llamada fetchCategories.

Pero todavía no estamos invocando esta acción.

En la lección anterior hemos llamado a fetchProducts desde HomeView.

Posibles ubicaciones para invocar fetchCategories

Podemos hacer lo mismo e invocar a fetchCategories también desde HomeView.

O bien podemos esperar a que cargue LeftMenu, que es otro componente más específico.

Para finalmente hacer el request desde LeftMenu.

O incluso podemos ser más específicos y esperar por el evento mounted de CategoryOptions.

Eso también es posible.

O sea que aquí desde CategoryOptions podemos invocar a la acción de fetchCategories.

Decisión actual

Por ahora no necesitamos ser tan específicos.

Vamos simplemente a hacer el request desde este mismo lugar.

Uso de useCategoriesStore

Vamos a obtener primero una referencia de categoriesStore a través del método useCategoriesStore.

Y luego, desde este store, vamos a invocar a la acción fetchCategories.

Verificación de peticiones

Vamos a actualizar y como vemos, ya estamos obteniendo las categorías, así como los productos.

Si presionamos F12 y actualizamos una vez más, vamos a ver cómo terminamos haciendo una petición GET a products.json y otra más a categories.json.

Estamos haciendo aquí dos HTTP requests. Dos peticiones HTTP.

Esta lección no cuenta con recursos adicionales.

Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.

En la lección anterior hemos hecho uso de “fetch” para descargar los productos a través de una petición HTTP. Vamos a aplicar ahora la misma idea para las categorías. Para ello vamos a definir una acción en el store de categories. Vamos a agregar una acción que se va a llamar “fetchCategories” y vamos a leer la data, haciendo un request a “/data/categories.json”. Una vez que obtengamos una respuesta válida con formato “json”, vamos a asignar esta data a nuestro estado a través de “this.categories”. No necesitamos “getters” para las categorías, por lo tanto, podemos eliminar este atributo quedándonos de esta manera nuestro store. Aquí hemos definido una acción llamada “fetchCategories”, pero todavía no estamos invocando esta acción. En la lección anterior hemos llamado a “fetchProducts” desde “HomeView”. Podemos hacer lo mismo e invocar a “fetchCategories” también desde “HomeView”, o bien podemos esperar a que cargue “LeftMenu”, que es otro componente más específico. Para finalmente hacer el request desde left menu o incluso podemos ser más específicos y esperar por el evento mounted de “CategoryOptions”. Eso también es posible. O sea que aquí desde “CategoryOptions” podemos invocar a la acción de “fetchCategories”. Por ahora no necesitamos ser tan específicos. Vamos simplemente a hacer el request desde este mismo lugar. Vamos a obtener primero una referencia de “categoriesStore” a través del método “useCategoriesStore”. Y luego, desde este store vamos a invocar a la acción “fetchCategories”. Vamos a actualizar y como vemos, ya estamos obteniendo las categorías, así como los productos. Si presionamos F12 y actualizamos una vez más, vamos a ver cómo terminamos haciendo una petición get a “products.json” y otra más a “categories.json”. Estamos haciendo aquí dos HTTP requests. Dos peticiones HTTP.

¿Tienes dudas?

Publicar pregunta

¡Comparte conocimiento!

X

Volver al índice

Regístrate

Inicia sesión para llevar un control de tu progreso.

Capítulos
















































































































112

Fetch Categories












Espera un momento 🎁 ...

¿Te gustaría aprender a programar, gratis?

Mago de Programación y más

Sólo debes registrarte 😉.