前端API请求缓存的5种方案

文章目录

  • 一、前言
  • 二、[方案一]数据缓存
  • 三、[方案二]单`promise` 缓存
  • 四、[方案三]多`promise` 缓存
  • 五、[方案四]添加时间有关的缓存
  • 六、[方案五]基于修饰器的方案四
  • 七、最后

一、前言

开发 web 应用程序时,性能都是必不可少的话题。

对于webpack打包的单页面应用程序而言,我们可以采用很多方式来对性能进行优化,比方说 tree-shaking、模块懒加载、利用 extrens 网络cdn 加速这些常规的优化。

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

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

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

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

二、[方案一]数据缓存

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

const dataCache = new Map()async getWares() {let key = 'wares'// 从data 缓存中获取 数据let data = dataCache.get(key)if (!data) {// 没有数据请求服务器const res = await request.get('/getWares')// 其他操作...data = ...// 设置数据缓存dataCache.set(key, data)}return data
} 

第一行代码 使用了 es6以上的 Map,理解为一个键值对存储结构。

之后 代码 使用 了 async 函数,可以将异步操作变得更为方便。

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

调用方式:

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

三、[方案二]单promise 缓存

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

const promiseCache = new Map()getWares() {const key = 'wares'let promise = promiseCache.get(key);// 当前promise缓存中没有 该promiseif (!promise) {promise = request.get('/getWares').then(res => {// 对res 进行操作...}).catch(error => {// 在请求回来后,如果出现问题,把promise从cache中删除 以避免第二次请求继续出错promiseCache.delete(key)return Promise.reject(error)})}// 返回promisereturn promise
}

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

调用方式:

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

四、[方案三]多promise 缓存

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

const querys ={wares: 'getWares',skus: 'getSku'
}
const promiseCache = new Map()async queryAll(queryApiName) {// 判断传入的数据是否是数组const queryIsArray = Array.isArray(queryApiName)// 统一化处理数据,无论是字符串还是数组均视为数组const apis = queryIsArray ? queryApiName : [queryApiName]// 获取所有的 请求服务const promiseApi = []apis.forEach(api => {// 利用promise let promise = promiseCache.get(api)if (promise) {// 如果 缓存中有,直接pushpromise.push(promise)} else {promise = request.get(querys[api]).then(res => {// 对res 进行操作...}).catch(error => {// 在请求回来后,如果出现问题,把promise从cache中删除promiseCache.delete(api)return Promise.reject(error)})promiseCache.set(api, promise)promiseCache.push(promise)}})return Promise.all(promiseApi).then(res => {// 根据传入的 是字符串还是数组来返回数据,因为本身都是数组操作// 如果传入的是字符串,则需要取出操作return queryIsArray ? res : res[0]})
}

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

调用方式:

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

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

往往缓存是有危害的,如果我们在知道修改了数据的情况下,直接把 cache 删除即可,此时我们调用方法就可以向服务器进行请求。这样我们规避了前端显示旧的的数据。但是我们可能一段时间没有对数据进行操作,那么此时旧的数据就一直存在,那么我们最好规定个时间来去除数据。该方案是采用了 类 持久化数据来做数据缓存,同时添加了过期时长数据以及参数化。代码如下:首先定义持久化类,该类可以存储 promise 或者 data

class ItemCache() {construct(data, timeout) {this.data = data// 设定超时时间,设定为多少秒this.timeout = timeout// 创建对象时候的时间,大约设定为数据获得的时间this.cacheTime = (new Date()).getTime}
}

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

class ExpriesCache {// 定义静态数据map来作为缓存池static cacheMap =  new Map()// 数据是否超时static isOverTime(name) {const data = ExpriesCache.cacheMap.get(name)// 没有数据 一定超时if (!data) return true// 获取系统当前时间戳const currentTime = (new Date()).getTime()        // 获取当前时间与存储时间的过去的秒数const overTime = (currentTime - data.cacheTime) / 1000// 如果过去的秒数大于当前的超时时间,也返回null让其去服务端取数据if (Math.abs(overTime) > data.timeout) {// 此代码可以没有,不会出现问题,但是如果有此代码,再次进入该方法就可以减少判断。ExpriesCache.cacheMap.delete(name)return true}// 不超时return false}// 当前data在 cache 中是否超时static has(name) {return !ExpriesCache.isOverTime(name)}// 删除 cache 中的 datastatic delete(name) {return ExpriesCache.cacheMap.delete(name) }// 获取static get(name) {const isDataOverTiem = ExpriesCache.isOverTime(name)//如果 数据超时,返回null,但是没有超时,返回数据,而不是 ItemCache 对象return isDataOverTiem ? null : ExpriesCache.cacheMap.get(name).data}// 默认存储20分钟static set(name, data, timeout = 1200) {// 设置 itemCacheconst itemCache = mew ItemCache(data, timeout)//缓存ExpriesCache.cacheMap.set(name, itemCache)}
}

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

// 生成key值错误
const generateKeyError = new Error("Can't generate key from name and argument")// 生成key值
function generateKey(name, argument) {// 从arguments 中取得数据然后变为数组const params = Array.from(argument).join(',')try{// 返回 字符串,函数名 + 函数参数return `${name}:${params}`}catch(_) {// 返回生成key错误return generateKeyError}
}async getWare(params1, params2) {// 生成keyconst key = generateKey('getWare', [params1, params2]) // 获得数据let data = ExpriesCache.get(key)if (!data) {const res = await request('/getWares', {params1, params2})// 使用 10s 缓存,10s之后再次get就会 获取null 而从服务端继续请求ExpriesCache.set(key, res, 10)}return data
}

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

调用方式:

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

六、[方案五]基于修饰器的方案四

和方案四是的解法一致的,但是是基于修饰器来做。代码如下:

// 生成key值错误
const generateKeyError = new Error("Can't generate key from name and argument")// 生成key值
function generateKey(name, argument) {// 从arguments 中取得数据然后变为数组const params = Array.from(argument).join(',')try{// 返回 字符串return `${name}:${params}`}catch(_) {return generateKeyError}
}function decorate(handleDescription, entryArgs) {// 判断 当前 最后数据是否是descriptor,如果是descriptor,直接使用// 例如 log 这样的修饰器if (isDescriptor(entryArgs[entryArgs.length - 1])) {return handleDescription(...entryArgs, [])} else {// 如果不是// 例如 add(1) plus(20) 这样的修饰器return function() {return handleDescription(...Array.protptype.slice.call(arguments), entryArgs)}}
}function handleApiCache(target, name, descriptor, ...config) {// 拿到函数体并保存const fn = descriptor.value// 修改函数体descriptor.value = function () { const key = generateKey(name, arguments)// key无法生成,直接请求 服务端数据if (key === generateKeyError)  {// 利用刚才保存的函数体进行请求return fn.apply(null, arguments)}let promise = ExpriesCache.get(key)if (!promise) {// 设定promisepromise = fn.apply(null, arguments).catch(error => {// 在请求回来后,如果出现问题,把promise从cache中删除ExpriesCache.delete(key)// 返回错误return Promise.reject(error)})// 使用 10s 缓存,10s之后再次get就会 获取null 而从服务端继续请求ExpriesCache.set(key, promise, config[0])}return promise }return descriptor;
}// 制定 修饰器
function ApiCache(...args) {return decorate(handleApiCache, args)
}

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

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

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

var counter = 0;var add = function () {counter++;
};@add
function foo() {
}

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

@add
function foo() {
}var counter;
var add;counter = 0;add = function () {counter++;
};

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

调用方式:

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

七、最后

本人每篇文章都是一字一句码出来,希望对大家有所帮助,多提提意见。顺手来个三连击,点赞👍收藏💖关注✨,一起加油☕

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/227585.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

win中查看MD5、Linux中查看MD5

win中的MD5计算 1、用GitBash Git Bash Here md5sum.exe 我记得-孙燕姿.mp32、win自带命令 certutil -hashfile 我记得-孙燕姿.mp3 MD5Linux中MD5计算 md5sum 我记得-孙燕姿.mp3

离线编译安装opencv库及多版本切换[ubuntu]

系统版本:ubuntu18.04 库版本:opencv4.6.0 & opencv3.6.0 一、多版本安装前准备 1. 卸载已经安装的opencv版本[可选] 1.1 卸载从软件仓库中安装的opencv sudo apt-get purge libopencv* 1.2 卸载使用source自行编译安装的opencv 首先进入原先编译…

你好,C++(3)2.1 一个C++程序的自白

第2部分 与C第一次亲密接触 在浏览了C“三分天下”的世界版图之后,便对C有了基本的了解,算是一只脚跨入了C世界的大门。那么,怎样将我们的另外一只脚也跨入C世界的大门呢?是该即刻开始编写C程序?还是…… 正在我们犹…

springboot(ssm疗养院管理系统 养老院管理平台Java系统

springboot(ssm疗养院管理系统 养老院管理平台Java系统 开发语言:Java 框架:ssm/springboot vue JDK版本:JDK1.8(或11) 服务器:tomcat 数据库:mysql 5.7(或8.0) 数…

Event事件的整理

很久没去看thinkphp框架文档,结果看到有更新到8.0版本。 好奇去下载框架运行, 好在我电脑都有运行的PHP版本是8.1多,拿捏这个新出的think 今天摸索event的这个事件功能, 文档的介绍是这样: (省略几十字)&#xff0…

[实践总结] 典型的串行任务局部并行化处理案例:多任务并发获取航班信息

假设你有一个APP,主要用于查询航班信息,你的APP是没有这些实时数据的,当用户发起查询请求时,你需要到各大航空公司的接口获取信息,最后统一整理加工返回到APP客户端。当然JDK自带了很多高级工具,比如CountD…

【Qt】报错error:undefined reference to `vtable for Consumer‘的解决方法

1. 问题原因 在创建完程序后,点击构建,显示编译错误。 错误问题如下: error: undefined reference to vtable在编译输出中查看显示如下: error:undefined reference to vtable for custom2. 原因分析 这个错误通常是因为 C 的虚函数表&am…

《面向机器学习的数据标注规程》摘录

说明:本文使用的标准是2019年的团体标准,最新的国家标准已在2023年发布。 3 术语和定义 3.2 标签 label 标识数据的特征、类别和属性等。 3.4 数据标注员 data labeler 对待标注数据进行整理、纠错、标记和批注等操作的工作人员。 【批注】按照定义…

Java中的网络通信协议与通信模型分析

一、引言 网络通信在现代社会中扮演着重要的角色,而Java作为一种广泛应用于网络编程的编程语言,其网络通信协议与通信模型的分析显得尤为重要。本文将分析Java中常用的网络通信协议和通信模型,探讨其特点和应用场景。 二、网络通信协议 1. …

【已解决】ModuleNotFoundError: No module named ‘tensorflow‘

问题描述 Traceback (most recent call last): File "dataset_tool.py", line 16, in <module> import tensorflow as tf ModuleNotFoundError: No module named tensorflow 如果直接pip install tensorflow&#xff0c;还会报错 解决办法 方法一 pip i…

redis未授权漏洞复现

什么是redis redis就是个数据库&#xff0c;跟mysql不同的地方在于redis主要将数据存在内存中&#xff0c;读写速度非常快 redis未授权 其原因很简单&#xff0c;就是redis服务器在默认安装好不配置的情况下可以直接免密码登录&#xff0c;登录后在web目录写入一句话木马&am…

钉钉中预览打印PDF问题(无法使用blob地址)

使用pdfjs-dist预览文件 依赖 npm install pdfjs-dist2.14.305组件 <template><div id"pageContainer"><div id"viewer"></div></div> </template><script> import pdfjs-dist/web/pdf_viewer.css; import *…

前端设计模式之旅:命令模式

引言 使用命令模式&#xff0c;我们可以将执行特定任务的对象与调用该方法的对象解耦。 核心思想 命令模式的核心思想是将请求封装成一个对象&#xff0c;从而使请求的发起者和请求的执行者解耦。 请求的发起者只需要知道如何创建命令对象并将其传递给请求者&#xff0c;而不需…

极坐标下的牛拉法潮流计算57节点MATLAB程序

微❤关注“电气仔推送”获得资料&#xff08;专享优惠&#xff09; 潮流计算&#xff1a; 潮流计算是根据给定的电网结构、参数和发电机、负荷等元件的运行条件&#xff0c;确定电力系统各部分稳态运行状态参数的计算。通常给定的运行条件有系统中各电源和负荷点的功率、枢纽…

贪心算法:买卖股票的最佳时机II 跳跃游戏 跳跃游戏II

122.买卖股票的最佳时机II 思路&#xff1a; 想要获得利润&#xff0c;至少要以两天为一个交易单元&#xff0c;因为两天才会有股价差。因此可以将最终利润进行分解&#xff0c;如prices[3] - prices[0] (prices[3] - prices[2]) (prices[2] - prices[1]) (prices[1] - pr…

【Mars3d-ModelEntity】实现gltf模型不随地图缩放而改变大小

需求场景&#xff1a; 1.实现gltf模型不随地图缩放而改变大小 相关代码&#xff1a; const graphic new mars3d.graphic.ModelEntity({ name: "警车", position: [116.346929, 30.861947, 401.34], style: { url: "//data.mars3d.cn/gltf/mars/jingche/jingc…

python界面开发,使用wxpython库

入门学习Python时&#xff0c;使从接触一个项目开始&#xff0c;当时需要我开发一个界面&#xff0c;当时综合考量之后&#xff0c;最终选择了今天要分享的内容部分&#xff0c;也就是使用Python来开发&#xff0c;主要使用到的是Python库——wxPython库来进行界面开发&#xf…

Git批量删除本地分支

开发一段时间后&#xff0c;我们本地会有很多无用的分支&#xff0c;一个一个的 git branch -D branchName 又感觉太费时间了&#xff0c;如果要批量删除&#xff0c;可以用下面的命令&#xff1a; git checkout master git branch | grep -v master | xargs git branch -D 注…

论文阅读:Lidar Annotation Is All You Need

目录 概要 Motivation 整体架构流程 技术细节 小结 概要 论文重点在探讨利用点云的地面分割任务作为标注&#xff0c;直接训练Camera的精细2D分割。在以往的地面分割任务中&#xff0c;利用Lidar来做地面分割是目前采用激光雷达方案进行自动驾驶的常见手段。来自Evocargo …

phpstudy是什么?

PHPStudy 是一个集成环境工具&#xff0c;它将 PHP 开发所需的软件&#xff0c;如 Apache&#xff08;Web服务器&#xff09;、MySQL&#xff08;数据库服务器&#xff09;、PHP&#xff08;脚本语言&#xff09;等打包在一起&#xff0c;以便用户能够轻松安装和配置这些软件&a…