Crea una cuenta y continúa aprendiendo 🚀

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

Frontend Aprendiz

Delay: setTimeout

Veamos cómo agregar un delay sobre nuestros requests, a fin de simular a un servidor que tarda unos segundos antes de devolver una respuesta.

Simulación de tiempo de respuesta en requests

En nuestro caso, a pesar que nosotros primero cargamos los componentes y luego cargamos la data, no se nota la diferencia.

Porque estamos usando una conexión rápida y además estamos descargando poca información.

Simulando demora en los requests

Lo que vamos a hacer ahora es simular que estos requests llevan más tiempo.

Generalmente, cuando se hace una petición a una API, hacemos un request a un servidor distinto.

Este servidor ejecuta alguna consulta sobre una base de datos, por ejemplo, y eso puede llevar un poco más de tiempo.

Si una acción tarda más de 200 milisegundos, se dice que ya es perceptible para el usuario.

El usuario ya nota esa diferencia de tiempo y lo puede percibir.

Cómo mejorar la experiencia de usuario

Vamos a simular que nuestros requests llevan más tiempo.

Luego vamos a ver cómo podemos mejorar la experiencia de usuario para dichas situaciones.

¿De qué manera podemos lograr ello?

Uso del método `mounted`

Al ejecutar este método mounted, nosotros hacemos un request para obtener los productos y otro para obtener las categorías.

Vamos a aplicar un delay justo antes de ejecutar ambas acciones.

Eso podemos ponerlo aquí dentro del actions.

Podemos aplicar un delay antes de ejecutar fetch.

O sea, podemos poner un tiempo de espera, por ejemplo, de dos segundos, y luego recién ejecutar fetch.

O podemos poner el delay de este lado para que luego de dos segundos recién invoquemos a la acción.

Aplicación de `setTimeout`

Ya que tenemos aquí el llamado de las dos acciones, vamos a aprovechar y vamos a poner de este lado nuestro delay.

En JavaScript existe algo llamado setTimeout.

Esta función setTimeout acepta dos argumentos:

Una función con lo que queremos ejecutar.
El valor propio del time out.

Es decir, cuánto tiempo debemos esperar hasta que se ejecute esta función.

Vamos a ponerle dos segundos para los productos, por ejemplo.

Y vamos a poner otro setTimeout de menor tiempo para las categorías.

Generalmente siempre van a ser menos.

Y los productos siempre van a tener muchos más datos.

Entonces vamos a ponerle dos segundos para las categorías.

Y cuatro segundos para los productos.

Resultado en el navegador

Seguimos haciendo lo mismo, pero estamos aplicando un delay justo antes de invocar a las acciones que se encargan de hacer fetch.

Entonces vamos a actualizar en el navegador.

Y vemos que no hay nada de información.

Luego de dos segundos aparecen las categorías.

Y luego de dos segundos más aparecen los productos.

Problemas de la carga lenta

Mientras la página está cargando, hay un tiempo de espera en el que el usuario no ve la información.

No sabe si hay más categorías o si hay productos realmente.

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 nuestro caso, a pesar que nosotros primero cargamos los componentes y luego cargamos la data, no se nota la diferencia porque estamos usando una conexión rápida y además estamos descargando poca información. Lo que vamos a hacer ahora es simular que estos request llevan más tiempo, porque generalmente cuando se hace una petición a una API, hacemos un request a un servidor distinto, y este servidor ejecuta alguna consulta sobre una base de datos, por ejemplo, y eso puede llevar un poco más de tiempo. Si una acción tarda más de 200 milisegundos, se dice que ya es perceptible para el usuario, el usuario ya nota esa diferencia de tiempo y lo puede percibir. Entonces vamos nosotros a simular que nuestros requests llevan más tiempo, y luego vamos a ver cómo podemos mejorar la experiencia de usuario para dichas situaciones. ¿De qué manera podemos lograr ello? Al ejecutar este método “mounted”. Nosotros hacemos un request para obtener los productos y otro para obtener las categorías. Vamos a aplicar un delay justo antes de ejecutar ambas acciones. ¿Sí?, eso podemos ponerlo aquí dentro del “actions”, podemos aplicar un delay antes de ejecutar “fetch”. O sea, podemos poner un tiempo de espera, por ejemplo, de dos segundos, y luego recién ejecutar fetch. O podemos poner el delay de este lado para que luego de dos segundos recién invoquemos a la acción. Ya que tenemos aquí el llamado de las dos acciones, vamos a aprovechar y vamos a poner de este lado nuestro delay. En JavaScript existe algo llamado “setTimeout”. Esta función “setTimeout” acepta dos argumentos, acepta una función con lo que queremos ejecutar y acepta el valor propio del time out. Es decir, cuánto tiempo debemos esperar hasta que se ejecute esta función. Vamos a ponerle dos segundos para los productos, por ejemplo, y vamos a poner otro “setTimeout” de menor tiempo para las categorías, ya que generalmente siempre van a ser menos, y los productos siempre van a tener muchos más datos. Entonces vamos a ponerle dos segundos para las categorías y cuatro segundos para los productos. Seguimos haciendo lo mismo, pero estamos aplicando un delay justo antes de invocar a las acciones que se encargan de hacer “fetch”. Entonces vamos a actualizar en el navegador y vemos que no hay nada de información. Luego de dos segundos aparecen las categorías y luego de dos segundos más aparecen los productos. Sin embargo, mientras la página está cargando, hay un tiempo de espera en el que el usuario no ve la información, no sabe si hay más categorías o si hay productos realmente.