En esta lección vamos a implementar un sencillo mecanismo para evitar realizar la misma petición HTTP más de una vez.

Ahora mismo, si buscamos el mismo nombre de usuario, lanzamos una nueva petición.

Yo lo que quiero es, cuando se busca, preguntar si ese perfil de GitHub ya está en la lista de favoritos y, si es así, devolverlo en lugar de lanzar un request nuevo.

Como los favoritos están guardados en un Map, podemos utilizar su método get para averiguar si existe en la lista.

Pero en nuestro caso tenemos un problema: la clave que guardamos es la id y nosotros buscamos por nombre de usuario.

La solución es sencilla, podemos cambiar todas las referencias de id por login y entonces funcionará.

Luego, podemos hacer nuestra pregunta:

const foundInFavorites = this.favorites.get(this.search)

if (foundInFavorites) 
    return this.result = foundInFavorites

De esta forma evitamos realizar la misma petición una y otra vez. Sin embargo, hay otro problema: si mantenemos un favorito de forma ilimitada, nunca podremos cargar nuevos datos. Por ejemplo, imagina que cambia su BIO o avatar: nunca lo sabríamos.

Para solucionarlo vamos a implementar un temporizador. Si el perfil está en favoritos y no transcurrido el tiempo necesario, cargamos la información local. De lo contrario hacemos una nueva petición y reiniciamos el temporizador.

const shouldRequestAgain = (() => {
  if (!!foundInFavorites) {
    const { lastRequestTime } = foundInFavorites
    const now = Date.now()
    return (now - lastRequestTime) > requestMaxTimeMs
  }
  return false
})()

if (!!foundInFavorites && !shouldRequestAgain) {
  console.log("Found and we use the cached version")
  return this.result = foundInFavorites
}

Enlaces

Código inicial Código final
Curso Vue en Escuela Vue

¿Tienes alguna pregunta sobre esta lección de Vue 3 desde cero?

Resuelve todas tus dudas sobre Vue en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.

Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬