Vue 缓存Hook:提高接口性能,减少重复请求

2024-01-09 16:29:17

?前言

在开发 Web 应用时,我们经常会遇到需要重复调用接口的场景。例如,当用户频繁刷新页面或进行某个操作时,我们可能需要多次请求相同的数据。这不仅会增加服务器负担,还会导致用户体验下降。为此,我们可以使用缓存机制来优化这一问题。本文将教你一步一步实现一个功能较完善的Vue缓存Hook(钩子函数),它可以帮助我们减少接口的重复调用,提高应用性能。

介绍

这个Hook是一个基于Vue响应式系统的缓存工具,它可以帮助我们轻松地在组件之间共享和管理缓存数据。通过使用缓存,我们可以将接口调用结果缓存起来,当再次需要相同数据时,可以直接从缓存中获取,避免重复调用接口。

示例

以下是一个简单的示例:

import { reactive } from 'vue';

// 缓存值的接口定义
interface CacheValue {
  data: any; // 存储的数据
  expireAt: number; // 数据的过期时间戳
}

// 使用缓存的功能函数
export function useCache() {
  // 创建一个响应式的Map对象来存储缓存
  const cache = reactive<Map<string, CacheValue>>(new Map());

  /**
   * @param {string} key - 数据的键
   * @param {any} data - 要存储的数据
   * @param {number} cacheTime - 数据的缓存时间(以毫秒为单位)
   */
  function setDataToCache(key: string, data: any, cacheTime: number) {
    const expireAt = Date.now() + cacheTime; // 计算过期时间戳
    cache.set(key, { data, expireAt }); // 存储数据和过期时间
  }

  /**
   *getDataFromCache函数:尝试从缓存中获取数据
   *@param {string} key - 数据的键
   *@returns {any|null} 如果缓存存在且未过期,返回缓存的数据;否则返回null
   */
  function getDataFromCache(key) {
    const cachedData = cache.get(key);
    if (cachedData) {
      const { data, expireAt } = cachedData as CacheValue;
      if (Date.now() < expireAt) {
        return data; // 如果未过期,返回数据
      }
      cache.delete(key); // 如果已过期,清除缓存项
    }
    return null; // 如果不存在或已过期,返回null
  }

  // clearExpiredCache函数:清除过期的缓存
  function clearExpiredCache() {
    const now = Date.now(); // 获取当前时间
    cache.forEach((value, key) => {
      if (value && value.expireAt && value.expireAt < now) {
        cache.delete(key); // 如果过期,删除缓存项
      }
    });
  }

  // 设置一个定时器,每60秒执行一次清除过期的缓存
  setInterval(clearExpiredCache, 60000);

  // 返回设置数据和获取数据的方法
  return { setDataToCache, getDataFromCache };
}

这个Hook使用了 Vue 的响应式系统,将一个 Map 对象作为缓存的容器,然后提供了两个方法:setDataToCache 和 getDataFromCache,分别用于设置和获取缓存数据。它还使用了 setInterval 函数来定期清除已过期的缓存项。

我们可以在任何需要缓存数据的组件中,使用这个Hook,例如:

<template>
  <div>
    <h1>用户信息</h1>
    <p v-if="loading">加载中...</p>
    <p v-else-if="error">加载失败</p>
    <p v-else>{{ userInfo }}</p>
  </div>
</template>

<script>
import { useCache } from './useCache';
import { onMounted, ref } from 'vue';

export default {
  setup() {
    const { setDataToCache, getDataFromCache } = useCache();
    const userInfo = ref(null);
    const loading = ref(false);
    const error = ref(false);

    async function fetchUserInfo() {
      loading.value = true;
      error.value = false;
      try {
        // 从缓存中获取用户信息
        const cachedUserInfo = getDataFromCache('userInfo');
        if (cachedUserInfo) {
          // 如果缓存中存在,直接赋值给 userInfo
          userInfo.value = cachedUserInfo;
        } else {
          // 如果缓存中不存在,调用接口获取用户信息
          const response = await fetch('/api/userInfo');
          const data = await response.json();
          // 将用户信息存入缓存中,设置缓存时间为 10 分钟
          setDataToCache('userInfo', data, 10 * 60 * 1000);
          // 将用户信息赋值给 userInfo
          userInfo.value = data;
        }
      } catch (err) {
        error.value = true;
      } finally {
        loading.value = false;
      }
    }

    onMounted(fetchUserInfo);

    return { userInfo, loading, error };
  },
};
</script>

这样,我们就可以在组件中使用Hook来提高接口的性能,同时保证数据的及时更新。

优化

当然,这个Hook还有很多可以优化和扩展的地方,比如:

错误处理

当前的实现中没有错误处理逻辑。在实际应用中,可能需要添加对异常情况的处理,比如缓存服务不可用时的回退策略。

优化后的代码如下:

import { reactive } from 'vue';

// 缓存值的接口定义
interface CacheValue {
  data: any; // 存储的数据
  expireAt: number; // 数据的过期时间戳
}

// 使用缓存的功能函数
export function useCache() {
  // 创建一个响应式的Map对象来存储缓存
  const cache = reactive<Map<string, CacheValue>>(new Map());

  /**
   * @param {string} key - 数据的键
   * @param {any} data - 要存储的数据
   * @param {number} cacheTime - 数据的缓存时间(以毫秒为单位)
   */
  function setDataToCache(key: string, data: any, cacheTime: number) {
    try {
      // 错误处理:确保所有参数都不为空
      if (!key || !data || !cacheTime) {
        throw new Error('参数不能为空');
      }
      // 错误处理:确保cacheTime是一个有效的正数字
      if (typeof cacheTime !== 'number' || isNaN(cacheTime) || cacheTime <= 0) {
        throw new Error('缓存时间必须是一个正数字');
      }
      // 计算过期时间戳
      const expireAt = Date.now() + cacheTime;
      // 将数据和过期时间存储到缓存中
      cache.set(key, { data, expireAt });
    } catch (error) {
      // 在控制台输出错误信息,方便调试
      console.error('在设置缓存时发生错误:', error);
      // 可以根据需要向用户发出警告或执行其他错误处理逻辑
    }
  }

  /**
   *getDataFromCache函数:尝试从缓存中获取数据
   *@param {string} key - 数据的键
   *@returns {any|null} 如果缓存存在且未过期,返回缓存的数据;否则返回null
   */
  function getDataFromCache(key) {
    try {
      // 如果缓存中存在这个键
      if (cache.get(key)) {
        // 获取键对应的缓存对象
        const { data, expireAt } = cache.get(key) as CacheValue;
        // 如果当前时间还没有超过过期时间
        if (Date.now() < expireAt) {
          // 返回缓存的数据
          return data;
        }
        cache.delete(key); // 清除过期的缓存项
      }
    } catch (error) {
      console.error('在获取缓存数据时发生错误:', error);
    }
    // 如果缓存不存在或已过期,返回null
    return null;
  }

  // clearExpiredCache函数:清除过期的缓存
  function clearExpiredCache() {
    const now = Date.now(); // 获取当前时间
    cache.forEach((value, key) => {
      if (value && value.expireAt && value.expireAt < now) {
        cache.delete(key); // 如果过期,删除缓存项
      }
    });
  }

  // 设置一个定时器,每60秒执行一次清除过期的缓存
  setInterval(clearExpiredCache, 60000);

  // 返回设置数据和获取数据的方法
  return { setDataToCache, getDataFromCache };
}

缓存的管理和优化不足

无论缓存是否被使用,都会定期执行清除操作,这可能会造成一些不必要的性能损耗。另外,它也没有考虑到缓存的容量问题,如果缓存中存储了过多的数据,可能会占用过多的内存空间。

考虑这些方面我们的解决方案是使用 setTimeout 函数来为每个缓存项设置一个单独的定时器,当缓存过期时自动清除,避免不必要的性能损耗。同时,可以使用 LRU(最近最少使用)算法来管理缓存的容量,当缓存达到一定的大小时,自动删除最久未使用的缓存项,避免缓存占用过多的空间。优化后的代码如下:

import { reactive } from 'vue';

// 缓存值的接口定义
interface CacheValue {
  data: any; // 存储的数据
  expireAt: number; // 数据的过期时间戳
  timer?: any;
}

// 使用缓存的功能函数
export function useCache() {
  // 创建一个响应式的Map对象来存储缓存
  const cache = reactive<Map<string, CacheValue>>(new Map());
  // 设置缓存的最大容量
  const max = 10;
  // 使用一个数组来存储缓存的键,按照最近使用的顺序排序
  const keys = [];

  /**
   * @param {string} key - 数据的键
   * @param {any} data - 要存储的数据
   * @param {number} cacheTime - 数据的缓存时间(以毫秒为单位)
   */
  function setDataToCache(key: string, data: any, cacheTime: number) {
    try {
      // 错误处理:确保所有参数都不为空
      if (!key || !data || !cacheTime) {
        throw new Error('参数不能为空');
      }
      // 错误处理:确保cacheTime是一个有效的正数字
      if (typeof cacheTime !== 'number' || isNaN(cacheTime) || cacheTime <= 0) {
        throw new Error('缓存时间必须是一个正数字');
      }
      // 计算过期时间戳
      const expireAt = Date.now() + cacheTime;
      // 将数据和过期时间存储到缓存中
      cache.set(key, { data, expireAt });
      // 为每个缓存项设置一个定时器,当缓存过期时自动清除
      const timer = setTimeout(() => {
        cache.delete(key);
        // 从键数组中移除该键
        keys.splice(keys.indexOf(key), 1);
      }, cacheTime);
      // 将定时器的引用也存储到缓存中,方便取消
      cache.get(key)!.timer = timer;
      // 将键添加到键数组的开头
      keys.unshift(key);
      // 如果缓存的数量超过了最大容量
      if (keys.length > max) {
        // 获取最久未使用的键
        const lastKey = keys.pop()!;
        // 清除该键对应的缓存项和定时器
        clearTimeout(cache.get(lastKey)!.timer);
        cache.delete(lastKey);
      }
    } catch (error) {
      // 在控制台输出错误信息,方便调试
      console.error('在设置缓存时发生错误:', error);
      // 可以根据需要向用户发出警告或执行其他错误处理逻辑
    }
  }

  /**
   *getDataFromCache函数:尝试从缓存中获取数据
   *@param {string} key - 数据的键
   *@returns {any|null} 如果缓存存在且未过期,返回缓存的数据;否则返回null
   */
  function getDataFromCache(key) {
    try {
      // 如果缓存中存在这个键
      if (cache.get(key)) {
        // 获取键对应的缓存对象
        const { data, expireAt } = cache.get(key) as CacheValue;
        // 如果当前时间还没有超过过期时间
        if (Date.now() < expireAt) {
          // 返回缓存的数据
          return data;
        }
        // 如果缓存已过期,清除缓存项和定时器
        cache.delete(key);
        clearTimeout(cache.get(key)!.timer);
        // 从键数组中移除该键
        keys.splice(keys.indexOf(key), 1);
      }
    } catch (error) {
      console.error('在获取缓存数据时发生错误:', error);
    }
    // 如果缓存不存在或已过期,返回null
    return null;
  }

  // 返回设置数据和获取数据的方法
  return { setDataToCache, getDataFromCache };
}

清空缓存

除此之外,还缺少一个清空所有缓存的功能:

 function clearAllCache() {
    // 清空缓存中的所有数据
    cache.clear();
    // 取消所有的定时器
    cache.forEach((value) => {
      clearTimeout(value.timer);
    });
    // 清空键数组
    keys.length = 0;
  }

最终代码

import { reactive } from 'vue';

// 缓存值的接口定义
interface CacheValue {
  data: any; // 存储的数据
  expireAt: number; // 数据的过期时间戳
  timer?: any;
}

// 使用缓存的功能函数
export function useCache() {
  // 创建一个响应式的Map对象来存储缓存
  const cache = reactive<Map<string, CacheValue>>(new Map());
  // 设置缓存的最大容量
  const max = 10;
  // 使用一个数组来存储缓存的键,按照最近使用的顺序排序
  const keys = [];

  /**
   * @param {string} key - 数据的键
   * @param {any} data - 要存储的数据
   * @param {number} cacheTime - 数据的缓存时间(以毫秒为单位)
   */
  function setDataToCache(key: string, data: any, cacheTime: number) {
    try {
      // 错误处理:确保所有参数都不为空
      if (!key || !data || !cacheTime) {
        throw new Error('参数不能为空');
      }
      // 错误处理:确保cacheTime是一个有效的正数字
      if (typeof cacheTime !== 'number' || isNaN(cacheTime) || cacheTime <= 0) {
        throw new Error('缓存时间必须是一个正数字');
      }
      // 计算过期时间戳
      const expireAt = Date.now() + cacheTime;
      // 将数据和过期时间存储到缓存中
      cache.set(key, { data, expireAt });
      // 为每个缓存项设置一个定时器,当缓存过期时自动清除
      const timer = setTimeout(() => {
        cache.delete(key);
        // 从键数组中移除该键
        keys.splice(keys.indexOf(key), 1);
      }, cacheTime);
      // 将定时器的引用也存储到缓存中,方便取消
      cache.get(key)!.timer = timer;
      // 将键添加到键数组的开头
      keys.unshift(key);
      // 如果缓存的数量超过了最大容量
      if (keys.length > max) {
        // 获取最久未使用的键
        const lastKey = keys.pop()!;
        // 清除该键对应的缓存项和定时器
        clearTimeout(cache.get(lastKey)!.timer);
        cache.delete(lastKey);
      }
    } catch (error) {
      // 在控制台输出错误信息,方便调试
      console.error('在设置缓存时发生错误:', error);
      // 可以根据需要向用户发出警告或执行其他错误处理逻辑
    }
  }

  /**
   *getDataFromCache函数:尝试从缓存中获取数据
   *@param {string} key - 数据的键
   *@returns {any|null} 如果缓存存在且未过期,返回缓存的数据;否则返回null
   */
  function getDataFromCache(key) {
    try {
      // 如果缓存中存在这个键
      if (cache.get(key)) {
        // 获取键对应的缓存对象
        const { data, expireAt } = cache.get(key) as CacheValue;
        // 如果当前时间还没有超过过期时间
        if (Date.now() < expireAt) {
          // 返回缓存的数据
          return data;
        }
        // 如果缓存已过期,清除缓存项和定时器
        cache.delete(key);
        clearTimeout(cache.get(key)!.timer);
        // 从键数组中移除该键
        keys.splice(keys.indexOf(key), 1);
      }
    } catch (error) {
      console.error('在获取缓存数据时发生错误:', error);
    }
    // 如果缓存不存在或已过期,返回null
    return null;
  }

  function clearAllCache() {
    // 清空缓存中的所有数据
    cache.clear();
    // 取消所有的定时器
    cache.forEach((value) => {
      clearTimeout(value.timer);
    });
    // 清空键数组
    keys.length = 0;
  }

  // 返回设置数据和获取数据的方法
  return { setDataToCache, getDataFromCache, clearAllCache };
}

以上便是一些可优化的点,除此之外,你还可以从持久化、性能监控、并发控制?、缓存策略等方面优化。

结语?

在本篇文章中,我们探讨了Vue缓存Hook的使用,这是一个基于Vue响应式系统的缓存工具,旨在帮助我们在组件之间轻松地共享和管理缓存数据。通过使用这个缓存Hook,我们能够有效地提高应用性能,减少不必要的接口调用,从而提升用户体验。希望这篇文章能够帮到大家,特别是在开发Vue应用时需要考虑性能优化和缓存管理的朋友们。如果你有任何问题或疑问,欢迎随时提问,我会尽力帮助解答。

文章来源:https://blog.csdn.net/cxy_wjq/article/details/135477072
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。