Vue 3 desde cero

Cachear favoritos

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


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:

JS
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.

JS
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

Juan Andrés Núñez
Juan Andrés Núñez
Ingeniero Frontend Senior. Especialista en Vue.js. Speaker. Docente profesional. Estoico.