前端api请求缓存方案

 在开发 web 应用程序时，性能都是必不可少的话题。对于webpack打包的单页面应用程序而言，我们可以采用很多方式来对性能进行优化，比方说 tree-shaking、模块懒加载、利用 extrens 网络cdn 加速这些常规的优化。

创新互联拥有十年成都网站建设工作经验,为各大企业提供成都做网站、网站建设服务，对于网页设计、PC网站建设（电脑版网站建设）、成都app软件开发公司、wap网站建设（手机版网站建设）、程序开发、网站优化（SEO优化）、微网站、国际域名空间等，凭借多年来在互联网的打拼，我们在互联网网站建设行业积累了很多网站制作、网站设计、网络营销经验，集策划、开发、设计、营销、管理等网站化运作于一体，具备承接各种规模类型的网站建设项目的能力。

甚至在vue-cli 项目中我们可以使用 --modern 指令生成新旧两份浏览器代码来对程序进行优化。

而事实上，缓存一定是提升web应用程序有效方法之一，尤其是用户受限于网速的情况下。提升系统的响应能力，降低网络的消耗。

当然，内容越接近于用户，则缓存的速度就会越快，缓存的有效性则会越高。

以客户端而言，我们有很多缓存数据与资源的方法，例如 标准的浏览器缓存 以及 目前火热的 Service worker。

但是，他们更适合静态内容的缓存。例如 html，js，css以及图片等文件。而缓存系统数据，我采用另外的方案。

那我现在就对我应用到项目中的各种 api 请求方案，从简单到复杂依次介绍一下。

方案一、 数据缓存

简单的 数据 缓存，第一次请求时候获取数据，之后便使用数据，不再请求后端api。

代码如下：

 
 
 
    
  
  
  
  1. const dataCache = new Map() 
    2. 
  
  
  
  2. async getWares() { 
    3. 
  
  
  
  3.     let key = 'wares' 
    4. 
  
  
  
  4.     // 从data 缓存中获取 数据 
    5. 
  
  
  
  5.     let data = dataCache.get(key) 
    6. 
  
  
  
  6.     if (!data) { 
    7. 
  
  
  
  7.         // 没有数据请求服务器 
    8. 
  
  
  
  8.         const res = await request.get('/getWares') 
    9. 
  
  
  
  9.         // 其他操作 
    10. 
  
  
  
  10.         ... 
    11. 
  
  
  
  11.         data = ... 
    12. 
  
  
  
  12.         // 设置数据缓存 
    13. 
  
  
  
  13.         dataCache.set(key, data) 
    14. 
  
  
  
  14.     } 
    15. 
  
  
  
  15.     return data 
    16. 
  
  
  
  16. }
    17.

第一行代码 使用了 es6以上的 Map，如果对map不是很理解的情况下，你可以参考

ECMAScript 6 入门 Set 和 Map 或者 Exploring ES6 关于 map 和 set的介绍，此处可以理解为一个键值对存储结构。

之后 代码 使用 了 async 函数，可以将异步操作变得更为方便。你可以参考ECMAScript 6 入门 async函数来进行学习或者巩固知识。

代码本身很容易理解，是利用 Map 对象对数据进行缓存，之后调用从 Map 对象来取数据。对于及其简单的业务场景，直接利用此代码即可。

调用方式：

 
 
 
    
  
  
  
  1. getWares().then( ... ) 
    2. 
  
  
  
  2. // 第二次调用 取得先前的data 
    3. 
  
  
  
  3. getWares().then( ... )
    4.

方案二、 promise缓存

方案一本身是不足的。因为如果考虑同时两个以上的调用此 api，会因为请求未返回而进行第二次请求api。

当然，如果你在系统中添加类似于 vuex、redux这样的单一数据源框架，这样的问题不太会遇到，但是有时候我们想在各个复杂组件分别调用api，而不想对组件进行组件通信数据时候，便会遇到此场景。

 
 
 
    
  
  
  
  1. const promiseCache = new Map() 
    2. 
  
  
  
  2. getWares() { 
    3. 
  
  
  
  3.     const key = 'wares' 
    4. 
  
  
  
  4.     let promise = promiseCache.get(key); 
    5. 
  
  
  
  5.     // 当前promise缓存中没有 该promise 
    6. 
  
  
  
  6.     if (!promise) { 
    7. 
  
  
  
  7.         promise = request.get('/getWares').then(res => { 
    8. 
  
  
  
  8.             // 对res 进行操作 
    9. 
  
  
  
  9.             ... 
    10. 
  
  
  
  10.         }).catch(error => { 
    11. 
  
  
  
  11.             // 在请求回来后，如果出现问题，把promise从cache中删除 以避免第二次请求继续出错S 
    12. 
  
  
  
  12.             promiseCache.delete(key) 
    13. 
  
  
  
  13.             return Promise.reject(error) 
    14. 
  
  
  
  14.         }) 
    15. 
  
  
  
  15.     } 
    16. 
  
  
  
  16.     // 返回promise 
    17. 
  
  
  
  17.     return promise 
    18. 
  
  
  
  18. }
    19.

该代码避免了方案一的同一时间多次请求的问题。同时也在后端出错的情况下对promise进行了删除，不会出现缓存了错误的promise就一直出错的问题。

调用方式:

 
 
 
    
  
  
  
  1. getWares().then( ... ) 
    2. 
  
  
  
  2. // 第二次调用 取得先前的promise 
    3. 
  
  
  
  3. getWares().then( ... )
    4.

方案三、 多promise 缓存

该方案是同时需要 一个以上 的api请求的情况下，对数据同时返回，如果某一个api发生错误的情况下。

均不返回正确数据。

 
 
 
    
  
  
  
  1. const querys ={ 
    2. 
  
  
  
  2.     wares: 'getWares', 
    3. 
  
  
  
  3.     skus: 'getSku' 
    4. 
  
  
  
  4. } 
    5. 
  
  
  
  5. const promiseCache = new Map() 
    6. 
  
  
  
  6. async queryAll(queryApiName) { 
    7. 
  
  
  
  7.     // 判断传入的数据是否是数组 
    8. 
  
  
  
  8.     const queryIsArray = Array.isArray(queryApiName) 
    9. 
  
  
  
  9.     // 统一化处理数据，无论是字符串还是数组均视为数组 
    10. 
  
  
  
  10.     const apis = queryIsArray ? queryApiName : [queryApiName] 
    11. 
  
  
  
  11.     // 获取所有的 请求服务 
    12. 
  
  
  
  12.     const promiseApi = [] 
    13. 
  
  
  
  13.     apis.forEach(api => { 
    14. 
  
  
  
  14.         // 利用promise  
    15. 
  
  
  
  15.         let promise = promiseCache.get(api) 
    16. 
  
  
  
  16.         if (promise) { 
    17. 
  
  
  
  17.             // 如果 缓存中有，直接push 
    18. 
  
  
  
  18.             promise.push(promise) 
    19. 
  
  
  
  19.         } else { 
    20. 
  
  
  
  20.              promise = request.get(querys[api]).then(res => { 
    21. 
  
  
  
  21.                 // 对res 进行操作 
    22. 
  
  
  
  22.                 ... 
    23. 
  
  
  
  23.                 }).catch(error => { 
    24. 
  
  
  
  24.                 // 在请求回来后，如果出现问题，把promise从cache中删除 
    25. 
  
  
  
  25.                 promiseCache.delete(api) 
    26. 
  
  
  
  26.                 return Promise.reject(error) 
    27. 
  
  
  
  27.             }) 
    28. 
  
  
  
  28.             promiseCache.set(api, promise) 
    29. 
  
  
  
  29.             promiseCache.push(promise) 
    30. 
  
  
  
  30.         } 
    31. 
  
  
  
  31.     }) 
    32. 
  
  
  
  32.     return Promise.all(promiseApi).then(res => { 
    33. 
  
  
  
  33.         // 根据传入的 是字符串还是数组来返回数据，因为本身都是数组操作 
    34. 
  
  
  
  34.         // 如果传入的是字符串，则需要取出操作 
    35. 
  
  
  
  35.         return queryIsArray ? res : res[0] 
    36. 
  
  
  
  36.     }) 
    37. 
  
  
  
  37. }
    38.

该方案是同时获取多个服务器数据的方式。可以同时获得多个数据进行操作，不会因为单个数据出现问题而发生错误。

调用方式：

 
 
 
    
  
  
  
  1. queryAll('wares').then( ... ) 
    2. 
  
  
  
  2. // 第二次调用 不会去取 wares，只会去skus 
    3. 
  
  
  
  3. queryAll(['wares', 'skus']).then( ... )
    4.

方案四 、添加时间有关的缓存

往往缓存是有危害的，如果我们在知道修改了数据的情况下，直接把 cache 删除即可，此时我们调用方法就可以向服务器进行请求。

这样我们规避了前端显示旧的的数据。但是我们可能一段时间没有对数据进行操作，那么此时旧的数据就一直存在，那么我们最好规定个时间来去除数据。

该方案是采用了 类 持久化数据来做数据缓存，同时添加了过期时长数据以及参数化。

代码如下：

首先定义持久化类,该类可以存储 promise 或者 data

 
 
 
    
  
  
  
  1. class ItemCache() { 
    2. 
  
  
  
  2.     construct(data, timeout) { 
    3. 
  
  
  
  3.         this.data = data 
    4. 
  
  
  
  4.         // 设定超时时间，设定为多少秒 
    5. 
  
  
  
  5.         this.timeout = timeout 
    6. 
  
  
  
  6.         // 创建对象时候的时间，大约设定为数据获得的时间 
    7. 
  
  
  
  7.         this.cacheTime = (new Date()).getTime 
    8. 
  
  
  
  8.     } 
    9. 
  
  
  
  9. }
    10.

然后我们定义该数据缓存。我们采用Map 基本相同的api

 
 
 
    
  
  
  
  1. class ExpriesCache { 
    2. 
  
  
  
  2.     // 定义静态数据map来作为缓存池 
    3. 
  
  
  
  3.     static cacheMap =  new Map() 
    4. 
  
  
  
  4.     // 数据是否超时 
    5. 
  
  
  
  5.     static isOverTime(name) { 
    6. 
  
  
  
  6.         const data = ExpriesCache.cacheMap.get(name) 
    7. 
  
  
  
  7.         // 没有数据 一定超时 
    8. 
  
  
  
  8.         if (!data) return true 
    9. 
  
  
  
  9.         // 获取系统当前时间戳 
    10. 
  
  
  
  10.         const currentTime = (new Date()).getTime()   
    11. 
  
  
  
  11.           // 获取当前时间与存储时间的过去的秒数 
    12. 
  
  
  
  12.         const overTime = (currentTime - data.cacheTime) / 1000 
    13. 
  
  
  
  13.         // 如果过去的秒数大于当前的超时时间，也返回null让其去服务端取数据 
    14. 
  
  
  
  14.         if (Math.abs(overTime) > data.timeout) { 
    15. 
  
  
  
  15.             // 此代码可以没有，不会出现问题，但是如果有此代码，再次进入该方法就可以减少判断。 
    16. 
  
  
  
  16.             ExpriesCache.cacheMap.delete(name) 
    17. 
  
  
  
  17.             return true 
    18. 
  
  
  
  18.         } 
    19. 
  
  
  
  19.         // 不超时 
    20. 
  
  
  
  20.         return false
    21. 
  
  
  
  21.     } 
    22. 
  
  
  
  22.     // 当前data在 cache 中是否超时 
    23. 
  
  
  
  23.     static has(name) { 
    24. 
  
  
  
  24.         return !ExpriesCache.isOverTime(name) 
    25. 
  
  
  
  25.     } 
    26. 
  
  
  
  26.     // 删除 cache 中的 data 
    27. 
  
  
  
  27.     static delete(name) { 
    28. 
  
  
  
  28.         return ExpriesCache.cacheMap.delete(name) 
    29. 
  
  
  
  29.     } 
    30. 
  
  
  
  30.     // 获取 
    31. 
  
  
  
  31.     static get(name) { 
    32. 
  
  
  
  32.         const isDataOverTiem = ExpriesCache.isOverTime(name) 
    33. 
  
  
  
  33.         //如果 数据超时，返回null，但是没有超时，返回数据，而不是 ItemCache 对象 
    34. 
  
  
  
  34.         return isDataOverTiem ? null : ExpriesCache.cacheMap.get(name).data 
    35. 
  
  
  
  35.     } 
    36. 
  
  
  
  36.     // 默认存储20分钟 
    37. 
  
  
  
  37.     static set(name, data, timeout = 1200) { 
    38. 
  
  
  
  38.         // 设置 itemCache 
    39. 
  
  
  
  39.         const itemCache = mew ItemCache(data, timeout) 
    40. 
  
  
  
  40.         //缓存 
    41. 
  
  
  
  41.         ExpriesCache.cacheMap.set(name, itemCache) 
    42. 
  
  
  
  42.     } 
    43. 
  
  
  
  43. }
    44.

此时数据类以及操作类 都已经定义好,我们可以在api层这样定义

 
 
 
    
  
  
  
  1. // 生成key值错误 
    2. 
  
  
  
  2. const generateKeyError = new Error("Can't generate key from name and argument") 
    3. 
  
  
  
  3. // 生成key值 
    4. 
  
  
  
  4. function generateKey(name, argument) { 
    5. 
  
  
  
  5.     // 从arguments 中取得数据然后变为数组 
    6. 
  
  
  
  6.     const params = Array.from(argument).join(',') 
    7. 
  
  
  
  7.     try{ 
    8. 
  
  
  
  8.         // 返回 字符串，函数名 + 函数参数 
    9. 
  
  
  
  9.         return `${name}:${params}` 
    10. 
  
  
  
  10.     }catch(_) { 
    11. 
  
  
  
  11.         // 返回生成key错误 
    12. 
  
  
  
  12.         return generateKeyError 
    13. 
  
  
  
  13.     } 
    14. 
  
  
  
  14. } 
    15. 
  
  
  
  15. async getWare(params1, params2) { 
    16. 
  
  
  
  16.     // 生成key 
    17. 
  
  
  
  17.     const key = generateKey('getWare', [params1, params2])  
    18. 
  
  
  
  18.     // 获得数据 
    19. 
  
  
  
  19.     let data = ExpriesCache.get(key) 
    20. 
  
  
  
  20.     if (!data) { 
    21. 
  
  
  
  21.         const res = await request('/getWares', {params1, params2}) 
    22. 
  
  
  
  22.         // 使用 10s 缓存，10s之后再次get就会 获取null 而从服务端继续请求 
    23. 
  
  
  
  23.         ExpriesCache.set(key, res, 10) 
    24. 
  
  
  
  24.     } 
    25. 
  
  
  
  25.     return data 
    26. 
  
  
  
  26. }
    27.

该方案使用了 过期时间 和 api 参数不同而进行 缓存的方式。已经可以满足绝大部分的业务场景。

调用方式：

 
 
 
    
  
  
  
  1. getWares(1,2).then( ... ) 
    2. 
  
  
  
  2. // 第二次调用 取得先前的promise 
    3. 
  
  
  
  3. getWares(1,2).then( ... ) 
    4. 
  
  
  
  4. // 不同的参数，不取先前promise 
    5. 
  
  
  
  5. getWares(1,3).then( ... )
    6.

方案五、基于修饰器的方案四

和方案四是的解法一致的，但是是基于修饰器来做。

代码如下：

 
 
 
    
  
  
  
  1. // 生成key值错误 
    2. 
  
  
  
  2. const generateKeyError = new Error("Can't generate key from name and argument") 
    3. 
  
  
  
  3. // 生成key值 
    4. 
  
  
  
  4. function generateKey(name, argument) { 
    5. 
  
  
  
  5.     // 从arguments 中取得数据然后变为数组 
    6. 
  
  
  
  6.     const params = Array.from(argument).join(',') 
    7. 
  
  
  
  7.     try{ 
    8. 
  
  
  
  8.         // 返回 字符串 
    9. 
  
  
  
  9.         return `${name}:${params}` 
    10. 
  
  
  
  10.     }catch(_) { 
    11. 
  
  
  
  11.         return generateKeyError 
    12. 
  
  
  
  12.     } 
    13. 
  
  
  
  13. } 
    14. 
  
  
  
  14. function decorate(handleDescription, entryArgs) { 
    15. 
  
  
  
  15.     // 判断 当前 最后数据是否是descriptor，如果是descriptor,直接 使用 
    16. 
  
  
  
  16.     // 例如 log 这样的修饰器 
    17. 
  
  
  
  17.     if (isDescriptor(entryArgs[entryArgs.length - 1])) { 
    18. 
  
  
  
  18.         return handleDescription(...entryArgs, []) 
    19. 
  
  
  
  19.     } else { 
    20. 
  
  
  
  20.         // 如果不是 
    21. 
  
  
  
  21.         // 例如 add(1) plus(20) 这样的修饰器 
    22. 
  
  
  
  22.         return function() { 
    23. 
  
  
  
  23.             return handleDescription(...Array.protptype.slice.call(arguments), entryArgs) 
    24. 
  
  
  
  24.         } 
    25. 
  
  
  
  25.     } 
    26. 
  
  
  
  26. } 
    27. 
  
  
  
  27. function handleApiCache(target, name, descriptor, ...config) { 
    28. 
  
  
  
  28.     // 拿到函数体并保存 
    29. 
  
  
  
  29.     const fn = descriptor.value 
    30. 
  
  
  
  30.     // 修改函数体 
    31. 
  
  
  
  31.     descriptor.value = function () {  
    32. 
  
  
  
  32.         const key =  generateKey(name, arguments) 
    33. 
  
  
  
  33.         // key无法生成，直接请求 服务端数据 
    34. 
  
  
  
  34.         if (key === generateKeyError)  { 
    35. 
  
  
  
  35.             // 利用刚才保存的函数体进行请求 
    36. 
  
  
  
  36.             return fn.apply(null, arguments) 
    37. 
  
  
  
  37.         } 
    38. 
  
  
  
  38.         let promise = ExpriesCache.get(key) 
    39. 
  
  
  
  39.         if (!promise) { 
    40. 
  
  
  
  40.             // 设定promise 
    41. 
  
  
  
  41.             promise = fn.apply(null, arguments).catch(error => { 
    42. 
  
  
  
  42.                  // 在请求回来后，如果出现问题，把promise从cache中删除 
    43. 
  
  
  
  43.                 ExpriesCache.delete(key) 
    44. 
  
  
  
  44.                 // 返回错误 
    45. 
  
  
  
  45.                 return Promise.reject(error) 
    46. 
  
  
  
  46.             }) 
    47. 
  
  
  
  47.             // 使用 10s 缓存，10s之后再次get就会 获取null 而从服务端继续请求 
    48. 
  
  
  
  48.             ExpriesCache.set(key, promise, config[0]) 
    49. 
  
  
  
  49.         } 
    50. 
  
  
  
  50.         return promise  
    51. 
  
  
  
  51.     } 
    52. 
  
  
  
  52.     return descriptor; 
    53. 
  
  
  
  53. }
    54. 
  
  
  
  54. // 制定 修饰器 
    55. 
  
  
  
  55. function ApiCache(...args) { 
    56. 
  
  
  
  56.     return decorate(handleApiCache, args) 
    57. 
  
  
  
  57. }
    58.

此时 我们就会使用 类来对api进行缓存

 
 
 
    
  
  
  
  1. class Api { 
    2. 
  
  
  
  2.     // 缓存10s 
    3. 
  
  
  
  3.     @ApiCache(10) 
    4. 
  
  
  
  4.     // 此时不要使用默认值，因为当前 修饰器 取不到 
    5. 
  
  
  
  5.     getWare(params1, params2) { 
    6. 
  
  
  
  6.         return request.get('/getWares') 
    7. 
  
  
  
  7.     } 
    8. 
  
  
  
  8. }
    9.

因为函数存在函数提升，所以没有办法利用函数来做 修饰器

例如:

 
 
 
    
  
  
  
  1. var counter = 0; 
    2. 
  
  
  
  2. var add = function () { 
    3. 
  
  
  
  3.   counter++; 
    4. 
  
  
  
  4. }; 
    5. 
  
  
  
  5. @add 
    6. 
  
  
  
  6. function foo() { 
    7. 
  
  
  
  7. }
    8.

该代码意图是执行后counter等于 1，但是实际上结果是counter等于 0。因为函数提升，使得实际执行的代码是下面这样

 
 
 
    
  
  
  
  1. @add 
    2. 
  
  
  
  2. function foo() { 
    3. 
  
  
  
  3. } 
    4. 
  
  
  
  4. var counter;
    5. 
  
  
  
  5. var add; 
    6. 
  
  
  
  6. counter = 0; 
    7. 
  
  
  
  7. add = function () { 
    8. 
  
  
  
  8.   counter++; 
    9. 
  
  
  
  9. };
    10.

所以没有 办法在函数上用修饰器。具体参考ECMAScript 6 入门 Decorator

此方式写法简单且对业务层没有太多影响。但是不可以动态修改 缓存时间

调用方式

 
 
 
    
  
  
  
  1. getWares(1,2).then( ... ) 
    2. 
  
  
  
  2. // 第二次调用 取得先前的promise 
    3. 
  
  
  
  3. getWares(1,2).then( ... ) 
    4. 
  
  
  
  4. // 不同的参数，不取先前promise 
    5. 
  
  
  
  5. getWares(1,3).then( ... )
    6.

总结

api的缓存机制与场景在这里也基本上介绍了，基本上能够完成绝大多数的数据业务缓存，在这里我也想请教教大家，有没有什么更好的解决方案，或者这篇博客中有什么不对的地方，欢迎指正，在这里感谢各位了。

同时这里也有很多没有做完的工作，可能会在后面的博客中继续完善。

网页标题：前端api请求缓存方案
当前网址：http://www.shufengxianlan.com/qtweb/news32/278432.html

成都网站建设公司_创新互联，为您提供网站设计公司、电子商务、营销型网站建设、域名注册、网站制作、ChatGPT

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站建设知识

分类信息网

成都企业网站改版　　 　做网站　　 　成都网站优化　　 　成都网站设计　　 　LOGO设计　　 　上市集团网站建设　　 　宏昇商务服务　　 　成都主机托管　　 　四川胜锦安防　　 　彭山网站制作　　 　简阳电信服务器托管　　 　营销型网站　　 　电商网站建设方案　　 　成都网站代运营　　 　成都广告公司　　 　香港虚拟主机腾讯云　　 　温江网站建设　　 　贵州义龙电信机房　　 　四川内江电信机房　　 　名片印刷