加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 建站 > 正文

详解前端API请求缓存方案

发布时间:2019-04-25 11:20:16 所属栏目:建站 来源:jump--jump
导读:在开发 web 应用程序时,性能都是必不可少的话题。对于webpack打包的单页面应用程序而言,我们可以采用很多方式来对性能进行优化,比方说 tree-shaking、模块懒加载、利用 extrens 网络cdn 加速这些常规的优化。甚至在vue-cli 项目中我们可以使用 --modern
副标题[/!--empirenews.page--]

 详解前端API请求缓存方案

在开发 web 应用程序时,性能都是必不可少的话题。对于webpack打包的单页面应用程序而言,我们可以采用很多方式来对性能进行优化,比方说 tree-shaking、模块懒加载、利用 extrens 网络cdn 加速这些常规的优化。甚至在vue-cli 项目中我们可以使用 --modern 指令生成新旧两份浏览器代码来对程序进行优化。

而事实上,缓存一定是提升web应用程序有效方法之一,尤其是用户受限于网速的情况下。提升系统的响应能力,降低网络的消耗。当然,内容越接近于用户,则缓存的速度就会越快,缓存的有效性则会越高。

以客户端而言,我们有很多缓存数据与资源的方法,例如 标准的浏览器缓存 以及 目前火热的 Service worker。但是,他们更适合静态内容的缓存。例如 html,js,css以及图片等文件。而缓存系统数据,我采用另外的方案。

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

方案一 数据缓存

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

代码如下:

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

第一行代码 使用了 es6以上的 Map,如果对map不是很理解的情况下,你可以参考 ECMAScript 6 入门 Set 和 Map 或者 Exploring ES6 关于 map 和 set的介绍,此处可以理解为一个键值对存储结构。

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

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

调用方式:

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

方案二 promise缓存

方案一本身是不足的。因为如果考虑同时两个以上的调用此 api,会因为请求未返回而进行第二次请求api。当然,如果你在系统中添加类似于 vuex、redux这样的单一数据源框架,这样的问题不太会遇到,但是有时候我们想在各个复杂组件分别调用api,而不想对组件进行组件通信数据时候,便会遇到此场景。

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

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

调用方式:

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

方案三 多promise 缓存

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

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

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

(编辑:核心网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读