devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：菜鸟追梦旅行 | 2024-02-14 23:38:11

赞

踩

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

 前言

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

介绍

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

示例

以下是一个简单的示例：

  1. import { reactive } from 'vue';
  2.  
  3. // 缓存值的接口定义
  4. interface CacheValue {
  5.   data: any; // 存储的数据
  6.   expireAt: number; // 数据的过期时间戳
  7. }
  8.  
  9. // 使用缓存的功能函数
  10. export function useCache() {
  11.   // 创建一个响应式的Map对象来存储缓存
  12.   const cache = reactive<Map<string, CacheValue>>(new Map());
  13.  
  14.   /**
  15.    * @param {string} key - 数据的键
  16.    * @param {any} data - 要存储的数据
  17.    * @param {number} cacheTime - 数据的缓存时间（以毫秒为单位）
  18.    */
  19.   function setDataToCache(key: string, data: any, cacheTime: number) {
  20.     const expireAt = Date.now() + cacheTime; // 计算过期时间戳
  21.     cache.set(key, { data, expireAt }); // 存储数据和过期时间
  22.   }
  23.  
  24.   /**
  25.    *getDataFromCache函数：尝试从缓存中获取数据
  26.    *@param {string} key - 数据的键
  27.    *@returns {any|null} 如果缓存存在且未过期，返回缓存的数据；否则返回null
  28.    */
  29.   function getDataFromCache(key) {
  30.     const cachedData = cache.get(key);
  31.     if (cachedData) {
  32.       const { data, expireAt } = cachedData as CacheValue;
  33.       if (Date.now() < expireAt) {
  34.         return data; // 如果未过期，返回数据
  35.       }
  36.       cache.delete(key); // 如果已过期，清除缓存项
  37.     }
  38.     return null; // 如果不存在或已过期，返回null
  39.   }
  40.  
  41.   // clearExpiredCache函数：清除过期的缓存
  42.   function clearExpiredCache() {
  43.     const now = Date.now(); // 获取当前时间
  44.     cache.forEach((value, key) => {
  45.       if (value && value.expireAt && value.expireAt < now) {
  46.         cache.delete(key); // 如果过期，删除缓存项
  47.       }
  48.     });
  49.   }
  50.  
  51.   // 设置一个定时器，每60秒执行一次清除过期的缓存
  52.   setInterval(clearExpiredCache, 60000);
  53.  
  54.   // 返回设置数据和获取数据的方法
  55.   return { setDataToCache, getDataFromCache };
  56. }

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

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

  1. <template>
  2.   <div>
  3.     <h1>用户信息</h1>
  4.     <p v-if="loading">加载中...</p>
  5.     <p v-else-if="error">加载失败</p>
  6.     <p v-else>{{ userInfo }}</p>
  7.   </div>
  8. </template>
  9.  
  10. <script setup>
  11.   import { useCache } from './useCache';
  12.   import { onMounted, ref } from 'vue';
  13.  
  14.   const { setDataToCache, getDataFromCache } = useCache();
  15.   const userInfo = ref(null);
  16.   const loading = ref(false);
  17.   const error = ref(false);
  18.  
  19.   async function fetchUserInfo() {
  20.     loading.value = true;
  21.     error.value = false;
  22.     try {
  23.       // 从缓存中获取用户信息
  24.       const cachedUserInfo = getDataFromCache('userInfo');
  25.       if (cachedUserInfo) {
  26.         // 如果缓存中存在，直接赋值给 userInfo
  27.         userInfo.value = cachedUserInfo;
  28.       } else {
  29.         // 如果缓存中不存在，调用接口获取用户信息
  30.         const response = await fetch('/api/userInfo');
  31.         const data = await response.json();
  32.         // 将用户信息存入缓存中，设置缓存时间为 10 分钟
  33.         setDataToCache('userInfo', data, 10 * 60 * 1000);
  34.         // 将用户信息赋值给 userInfo
  35.         userInfo.value = data;
  36.       }
  37.     } catch (err) {
  38.       error.value = true;
  39.     } finally {
  40.       loading.value = false;
  41.     }
  42.   }
  43.  
  44.   onMounted(fetchUserInfo);
  45. </script>

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

优化

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

错误处理

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

优化后的代码如下：

  1. import { reactive } from 'vue';
  2.  
  3. // 缓存值的接口定义
  4. interface CacheValue {
  5.   data: any; // 存储的数据
  6.   expireAt: number; // 数据的过期时间戳
  7. }
  8.  
  9. // 使用缓存的功能函数
  10. export function useCache() {
  11.   // 创建一个响应式的Map对象来存储缓存
  12.   const cache = reactive<Map<string, CacheValue>>(new Map());
  13.  
  14.   /**
  15.    * @param {string} key - 数据的键
  16.    * @param {any} data - 要存储的数据
  17.    * @param {number} cacheTime - 数据的缓存时间（以毫秒为单位）
  18.    */
  19.   function setDataToCache(key: string, data: any, cacheTime: number) {
  20.     try {
  21.       // 错误处理：确保所有参数都不为空
  22.       if (!key || !data || !cacheTime) {
  23.         throw new Error('参数不能为空');
  24.       }
  25.       // 错误处理：确保cacheTime是一个有效的正数字
  26.       if (typeof cacheTime !== 'number' || isNaN(cacheTime) || cacheTime <= 0) {
  27.         throw new Error('缓存时间必须是一个正数字');
  28.       }
  29.       // 计算过期时间戳
  30.       const expireAt = Date.now() + cacheTime;
  31.       // 将数据和过期时间存储到缓存中
  32.       cache.set(key, { data, expireAt });
  33.     } catch (error) {
  34.       // 在控制台输出错误信息，方便调试
  35.       console.error('在设置缓存时发生错误：', error);
  36.       // 可以根据需要向用户发出警告或执行其他错误处理逻辑
  37.     }
  38.   }
  39.  
  40.   /**
  41.    *getDataFromCache函数：尝试从缓存中获取数据
  42.    *@param {string} key - 数据的键
  43.    *@returns {any|null} 如果缓存存在且未过期，返回缓存的数据；否则返回null
  44.    */
  45.   function getDataFromCache(key) {
  46.     try {
  47.       // 如果缓存中存在这个键
  48.       if (cache.get(key)) {
  49.         // 获取键对应的缓存对象
  50.         const { data, expireAt } = cache.get(key) as CacheValue;
  51.         // 如果当前时间还没有超过过期时间
  52.         if (Date.now() < expireAt) {
  53.           // 返回缓存的数据
  54.           return data;
  55.         }
  56.         cache.delete(key); // 清除过期的缓存项
  57.       }
  58.     } catch (error) {
  59.       console.error('在获取缓存数据时发生错误：', error);
  60.     }
  61.     // 如果缓存不存在或已过期，返回null
  62.     return null;
  63.   }
  64.  
  65.   // clearExpiredCache函数：清除过期的缓存
  66.   function clearExpiredCache() {
  67.     const now = Date.now(); // 获取当前时间
  68.     cache.forEach((value, key) => {
  69.       if (value && value.expireAt && value.expireAt < now) {
  70.         cache.delete(key); // 如果过期，删除缓存项
  71.       }
  72.     });
  73.   }
  74.  
  75.   // 设置一个定时器，每60秒执行一次清除过期的缓存
  76.   setInterval(clearExpiredCache, 60000);
  77.  
  78.   // 返回设置数据和获取数据的方法
  79.   return { setDataToCache, getDataFromCache };
  80. }

缓存的管理和优化不足

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

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

  1. import { reactive } from 'vue';
  2.  
  3. // 缓存值的接口定义
  4. interface CacheValue {
  5.   data: any; // 存储的数据
  6.   expireAt: number; // 数据的过期时间戳
  7.   timer?: any;
  8. }
  9.  
  10. // 使用缓存的功能函数
  11. export function useCache() {
  12.   // 创建一个响应式的Map对象来存储缓存
  13.   const cache = reactive<Map<string, CacheValue>>(new Map());
  14.   // 设置缓存的最大容量
  15.   const max = 10;
  16.   // 使用一个数组来存储缓存的键，按照最近使用的顺序排序
  17.   const keys = [];
  18.  
  19.   /**
  20.    * @param {string} key - 数据的键
  21.    * @param {any} data - 要存储的数据
  22.    * @param {number} cacheTime - 数据的缓存时间（以毫秒为单位）
  23.    */
  24.   function setDataToCache(key: string, data: any, cacheTime: number) {
  25.     try {
  26.       // 错误处理：确保所有参数都不为空
  27.       if (!key || !data || !cacheTime) {
  28.         throw new Error('参数不能为空');
  29.       }
  30.       // 错误处理：确保cacheTime是一个有效的正数字
  31.       if (typeof cacheTime !== 'number' || isNaN(cacheTime) || cacheTime <= 0) {
  32.         throw new Error('缓存时间必须是一个正数字');
  33.       }
  34.       // 计算过期时间戳
  35.       const expireAt = Date.now() + cacheTime;
  36.       // 将数据和过期时间存储到缓存中
  37.       cache.set(key, { data, expireAt });
  38.       // 为每个缓存项设置一个定时器，当缓存过期时自动清除
  39.       const timer = setTimeout(() => {
  40.         cache.delete(key);
  41.         // 从键数组中移除该键
  42.         keys.splice(keys.indexOf(key), 1);
  43.       }, cacheTime);
  44.       // 将定时器的引用也存储到缓存中，方便取消
  45.       cache.get(key)!.timer = timer;
  46.       // 将键添加到键数组的开头
  47.       keys.unshift(key);
  48.       // 如果缓存的数量超过了最大容量
  49.       if (keys.length > max) {
  50.         // 获取最久未使用的键
  51.         const lastKey = keys.pop()!;
  52.         // 清除该键对应的缓存项和定时器
  53.         clearTimeout(cache.get(lastKey)!.timer);
  54.         cache.delete(lastKey);
  55.       }
  56.     } catch (error) {
  57.       // 在控制台输出错误信息，方便调试
  58.       console.error('在设置缓存时发生错误：', error);
  59.       // 可以根据需要向用户发出警告或执行其他错误处理逻辑
  60.     }
  61.   }
  62.  
  63.   /**
  64.    *getDataFromCache函数：尝试从缓存中获取数据
  65.    *@param {string} key - 数据的键
  66.    *@returns {any|null} 如果缓存存在且未过期，返回缓存的数据；否则返回null
  67.    */
  68.   function getDataFromCache(key) {
  69.     try {
  70.       // 如果缓存中存在这个键
  71.       if (cache.get(key)) {
  72.         // 获取键对应的缓存对象
  73.         const { data, expireAt } = cache.get(key) as CacheValue;
  74.         // 如果当前时间还没有超过过期时间
  75.         if (Date.now() < expireAt) {
  76.           // 返回缓存的数据
  77.           return data;
  78.         }
  79.         // 如果缓存已过期，清除缓存项和定时器
  80.         cache.delete(key);
  81.         clearTimeout(cache.get(key)!.timer);
  82.         // 从键数组中移除该键
  83.         keys.splice(keys.indexOf(key), 1);
  84.       }
  85.     } catch (error) {
  86.       console.error('在获取缓存数据时发生错误：', error);
  87.     }
  88.     // 如果缓存不存在或已过期，返回null
  89.     return null;
  90.   }
  91.  
  92.   // 返回设置数据和获取数据的方法
  93.   return { setDataToCache, getDataFromCache };
  94. }

清空缓存

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

  1.  function clearAllCache() {
  2.     // 清空缓存中的所有数据
  3.     cache.clear();
  4.     // 取消所有的定时器
  5.     cache.forEach((value) => {
  6.       clearTimeout(value.timer);
  7.     });
  8.     // 清空键数组
  9.     keys.length = 0;
  10.   }

最终代码

  1. import { reactive } from 'vue';
  2.  
  3. // 缓存值的接口定义
  4. interface CacheValue {
  5.   data: any; // 存储的数据
  6.   expireAt: number; // 数据的过期时间戳
  7.   timer?: any;
  8. }
  9.  
  10. // 使用缓存的功能函数
  11. export function useCache() {
  12.   // 创建一个响应式的Map对象来存储缓存
  13.   const cache = reactive<Map<string, CacheValue>>(new Map());
  14.   // 设置缓存的最大容量
  15.   const max = 10;
  16.   // 使用一个数组来存储缓存的键，按照最近使用的顺序排序
  17.   const keys = [];
  18.  
  19.   /**
  20.    * @param {string} key - 数据的键
  21.    * @param {any} data - 要存储的数据
  22.    * @param {number} cacheTime - 数据的缓存时间（以毫秒为单位）
  23.    */
  24.   function setDataToCache(key: string, data: any, cacheTime: number) {
  25.     try {
  26.       // 错误处理：确保所有参数都不为空
  27.       if (!key || !data || !cacheTime) {
  28.         throw new Error('参数不能为空');
  29.       }
  30.       // 错误处理：确保cacheTime是一个有效的正数字
  31.       if (typeof cacheTime !== 'number' || isNaN(cacheTime) || cacheTime <= 0) {
  32.         throw new Error('缓存时间必须是一个正数字');
  33.       }
  34.       // 计算过期时间戳
  35.       const expireAt = Date.now() + cacheTime;
  36.       // 将数据和过期时间存储到缓存中
  37.       cache.set(key, { data, expireAt });
  38.       // 为每个缓存项设置一个定时器，当缓存过期时自动清除
  39.       const timer = setTimeout(() => {
  40.         cache.delete(key);
  41.         // 从键数组中移除该键
  42.         keys.splice(keys.indexOf(key), 1);
  43.       }, cacheTime);
  44.       // 将定时器的引用也存储到缓存中，方便取消
  45.       cache.get(key)!.timer = timer;
  46.       // 将键添加到键数组的开头
  47.       keys.unshift(key);
  48.       // 如果缓存的数量超过了最大容量
  49.       if (keys.length > max) {
  50.         // 获取最久未使用的键
  51.         const lastKey = keys.pop()!;
  52.         // 清除该键对应的缓存项和定时器
  53.         clearTimeout(cache.get(lastKey)!.timer);
  54.         cache.delete(lastKey);
  55.       }
  56.     } catch (error) {
  57.       // 在控制台输出错误信息，方便调试
  58.       console.error('在设置缓存时发生错误：', error);
  59.       // 可以根据需要向用户发出警告或执行其他错误处理逻辑
  60.     }
  61.   }
  62.  
  63.   /**
  64.    *getDataFromCache函数：尝试从缓存中获取数据
  65.    *@param {string} key - 数据的键
  66.    *@returns {any|null} 如果缓存存在且未过期，返回缓存的数据；否则返回null
  67.    */
  68.   function getDataFromCache(key) {
  69.     try {
  70.       // 如果缓存中存在这个键
  71.       if (cache.get(key)) {
  72.         // 获取键对应的缓存对象
  73.         const { data, expireAt } = cache.get(key) as CacheValue;
  74.         // 如果当前时间还没有超过过期时间
  75.         if (Date.now() < expireAt) {
  76.           // 返回缓存的数据
  77.           return data;
  78.         }
  79.         // 如果缓存已过期，清除缓存项和定时器
  80.         cache.delete(key);
  81.         clearTimeout(cache.get(key)!.timer);
  82.         // 从键数组中移除该键
  83.         keys.splice(keys.indexOf(key), 1);
  84.       }
  85.     } catch (error) {
  86.       console.error('在获取缓存数据时发生错误：', error);
  87.     }
  88.     // 如果缓存不存在或已过期，返回null
  89.     return null;
  90.   }
  91.  
  92.   function clearAllCache() {
  93.     // 清空缓存中的所有数据
  94.     cache.clear();
  95.     // 取消所有的定时器
  96.     cache.forEach((value) => {
  97.       clearTimeout(value.timer);
  98.     });
  99.     // 清空键数组
  100.     keys.length = 0;
  101.   }
  102.  
  103.   // 返回设置数据和获取数据的方法
  104.   return { setDataToCache, getDataFromCache, clearAllCache };
  105. }

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

结语 

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/82675
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号