Vue缓存字典值减少网络请求次数,解决同样参数并发请求多次

前言

在一些项目里,我们可能有着大量的下拉框,而这些下拉框的数据就来源于我们后端接口返回的字典信息。于是,画风可能是这样的,每次下拉,你都需要请求一次字典接口拿到这些数据,于是每次组件刷新都会重复请求接口,造成性能上的浪费,如下图所示:

image.png

那么,我们可不可以把这些字典值缓存起来,只在第一次加载时请求一次呢?

使用vuex缓存字典数据

Vue项目中,我们要实现数据的缓存,自然要考虑到VuexPinia状态管理了。

思路是这样的:每个字典肯定有一个key,也就是其名字,每次拿字典值先从状态管理中寻找字典的key,如果找不到或者数据为空,我们就请求接口,响应后先把数据处理后存放在状态管理后再返回;当第二次请求时,自然地就从状态管理中取值而不是再次请求接口了。

新建测试项目,后台使用koa返回简单的字典值:

image.png

前端为Vue3+Vuex,使用Element-Plus组件库中的Select下拉组件,此下拉组件需要的数据格式如下:

[{label:"",value:""}]

Vuex中相关代码为:

const store =createStore({state:{dicData:{}},mutations:{getDic(state:any,key:string){return state.dicData[key]},setDic(state:any,data:{key:string;list:any[]}){const {key,list} =data;state.dicData[key]=list}},actions:{async GET_DIC(context:any,payload:any){const {key} = payloadif(context.state.dicData[key]){return context.state.dicData[key]} else{const data =(await getDicData(key)).dataconst list = data.map(item=>({value: item.key || item.code,label: item.value || item.name}))context.commit('setDic',{key:key,list:list});return list}}}
})

 

在actions的GET_DIC方法中,我们根据传入的key先从state中的dicData取出字典值,取不到后才请求接口getDicData拿到值,做数据处理后,先通过mutation的setDic方法设置字典数据再返回。

调用如下:

 store.dispatch("GET_DIC",{key:"fruit"}).then(res=>{options.value=res;})

这样,无论组件怎么刷新接口始终只调用一次,节省了等待时间和带宽。

如果后端接口没有这么规范,每一个字典都单独做了一个接口,也可以利用swtich,根据不同的key单独写处理数据的逻辑,最终在dicData的值均是形如以下的数据格式就好了。

dicData:{"fruit":[{label:"苹果",value:101}],"class":[{label:"一年级一班",value:201}]
}

Pinia的实现

export const useSelectStore =defineStore('select',{state:()=>{return{dicData:{}}},actions:{setDic(key:string,list:any[]){this.dicData[key]=list;},async getDic(key:string){console.log(this.dicData)if(this.dicData[key]){return this.dicData[key]} else{const data =(await getDicData(key)).data;const list = data.map(item=>({value: item.key || item.code,label: item.value || item.name}));this.setDic(key,list);return list;}}}
})

调用

const selectStore= useSelectStore();
selectStore.getDic(props.requestKey).then(res=>{options.value=res;})

Pinia代码上差不了太多,不过其本身的确比Vuex简洁一些。

同时渲染造成的请求并发问题

评论区有小伙伴说到了万一同时渲染会发起多个一样的请求,也就是请求并发的问题。如图所示,页面有四个班级列表的下拉。渲染该页面则每个下拉都会发起一个请求,即:

image.png

可以看到,班级的字典数据请求共有4次,违背了我们设计的初衷。那么,我们如何解决呢?就要对接口本身做缓存了,而这个缓存方案也很简单,我们这块只需要对字典数据的接口单独缓存,使用Promise就够了。

先上代码(以Pinia为例):

const cacheMap={};
​
export const useSelectStore =defineStore('select',{state:()=>{return{dicData:{}}},actions:{setDic(key:string,list:any[]){this.dicData[key]=list;},getDic(key:string){// console.log(this.dicData)if(this.dicData[key]){return new Promise((resolve,reject)=>{resolve(this.dicData[key])})} else{// return new Promise((resolve,reject)=>{//     getDicData(key).then(res=>{//         const data =res.data;//         const list = data.map(item=>({//             value: item.key || item.code,//             label: item.value || item.name//         }));//         this.setDic(key,list);//         resolve(list);//     })// })//添加接口并发缓存处理if((cacheMap?.[key]?.length ?? 0)==0){cacheMap[key]=[];getDicData(key).then(res=>{const data =res.data;while(cacheMap[key].length){const list = data.map(item=>({value: item.key || item.code,label: item.value || item.name}));this.setDic(key,list);const resolve = cacheMap[key].shift();resolve[0](list)}})}return new Promise((resolve,reject)=>{cacheMap[key].push([resolve,reject]);})}}}
})
​

 

cacheMap为全局的缓存对象,其每个属性key为字典的key,每次请求返回一个promise,并将resolvereject回调存储下来。对于cacheMap[key],其数组为空时,可知是首次请求,此时调用接口获取数据。由于接口请求也是异步,实例化Promise的语句是同步的,当请求响应前所有的resolvereject回调已经缓存。我们调用所有的resolve完成所有的promise并清空数组,就实现了简单的接口缓存。

image.png

 

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

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

相关文章

Android平台一对一音视频通话方案对比:WebRTC VS RTMP VS RTSP

一对一音视频通话使用场景 一对一音视频通话都需要稳定、清晰和流畅,以确保良好的用户体验,常用的使用场景如下: 社交应用:社交应用是一种常见的使用场景,用户可以通过音视频通话进行面对面的交流;在线教…

分享kubernetes部署:基于Ansible自动安装kubernetes

基于Ansible自动安装kubernetes 环境准备 我们以如下机器环境为例: 开放端口: 控制平面节点 工作节点 请按如上中规定的开放端口,或关闭防火墙: systemctlstopfirewalld&&\ systemctldisablefirewalld 安装常用工具 sudo…

PPT忘记密码如何解除?

PPT文件所带有的两种加密方式,打开密码以及修改权限,两种密码在打开文件的时候都会有相应的提示,但不同的是两种加密忘记密码之后是不同的。 如果忘记了打开密码,我们就没办法打开PPT文件了;如果是忘记了修改密码&…

Android 版本 对应的 API版本

Android 14(开发者预览版) 如需详细了解平台变更,请参阅 Android 14 文档。 Android 13(API 级别 33) 如需详细了解平台变更,请参阅 Android 13 文档。 Android 12(API 级别 31、32&#xf…

【云原生】Docker-Compose全方面学习

目录 1.compose简介 Compose V2 2.compose安装与下载 二进制包 PIP 安装 bash 补全命令 卸载 3.docker compose管理命令 命令对象与格式 命令选项 命令使用说明 1.compose简介 Compose 是用于定义和运行多容器 Docker 应用程序的工具。通过 Compose,您可…

【音视频】edge与chrome在性能上的比较

目录 结论先说 实验 结论 实验机器的cpu配置 用EDGE拉九路​编辑 google拉五路就拉不出来了 资源使用情况 edge报错​编辑 如果服务器端 性能也满 了,就会不回复;验证方式 手动敲 8081,不回应。 结论先说 实验 用chrome先拉九路&#…

k8s概念-pv和pvc

回到目录 kubernetes存储卷的分类太丰富了,每种类型都要写相应的接口与参数才行,这就让维护与管理难度加大。 persistenvolume(PV) 是配置好的一段存储(可以是任意类型的存储卷) 也就是说将网络存储共享出来,配置定义成PV。 PersistentVolumeClaim(PVC)是用户pod使…

使用隧道HTTP时如何解决网站验证码的问题?

使用代理时,有时候会遇到网站验证码的问题。验证码是为了防止机器人访问或恶意行为而设置的一种验证机制。当使用代理时,由于请求的源IP地址被更改,可能会触发网站的验证码机制。以下是解决网站验证码问题的几种方法: 1. 使用高匿…

APP开发中的性能优化:提升用户满意度的关键

APP开发中的性能优化是需要持续进行的,它不仅能够让用户体验到 APP的使用感受,还能在一定程度上提升用户的满意度,从而提升 APP的粘性和转化率。不过在实际开发中,很多 APP开发公司会存在性能优化上的问题,这就需要了解…

IP提取器对比器

需求: 一个html 页面 ,有两个输入框 第一个输入框输入文本中包含多个ip,输入的ip是不规则的,需要使用正则表达式提取出 输入文本的ip地址 , 然后在第二个输入框中输入内容,并提取出内容的ip ,如…

Vue基于php医院预约挂号系统_6nrhh

随着信息时代的来临,过去的管理方式缺点逐渐暴露,对过去的医院预约挂号管理方式的缺点进行分析,采取计算机方式构建医院预约挂号系统。本文通过阅读相关文献,研究国内外相关技术,开发并设计一款医院预约挂号系统的构建…

【Linux命令行与Shell脚本编程】第十六章 Shell函数

Linux命令行与Shell脚本编程 第一章 文章目录 Linux命令行与Shell脚本编程六.函数6.1.脚本函数基础6.1.1.创建函数6.1.2.使用函数 6.2.函数返回值6.2.1.默认的退出状态码6.2.2.使用return命令6.2.3.使用函数输出 6.3.函数中使用变量6.3.1.向函数传递参数6.3.2.在函数中处理变量…

OLED透明屏拼缝技术:创新的显示解决方案

引言:OLED透明屏作为一种创新的显示技术,已经在各个领域展现出了巨大的潜力。而其中的拼缝技术更是为OLED透明屏的应用带来了全新的可能性。 对此,尼伽便大家具体介绍一下OLED透明屏拼缝技术的概念、优势以及应用领域,并探讨其在…

JVM之类加载与字节码(二)

3. 编译期处理 什么是语法糖 所谓的 语法糖 ,其实就是指 java 编译器把 *.java 源码编译为 *.class 字节码的过程中,自动生成 和转换的一些代码,主要是为了减轻程序员的负担,算是 java 编译器给我们的一个额外福利(给…

C高级 作业 day4 8/7

1.整理思维导图 2.写一个函数&#xff0c;获取用户的uid和gid并使用变量接收 3.整理冒泡排序、选择排序和快速排序的代码 冒泡排序 //冒泡排序 void bubble_sort(int a[],int len) {int count0;for(int i1;i<len;i) //控制轮数{for(int j0;j<len-i;j) //控制每一轮交换…

flex 弹性布局

Flex 布局的使用 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; //flex作为display的一个属性使用 } 行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; } 注意&#xff1a;设为 Flex 布局以后&#xff0c;子元素的float、clear和vertical-align…

Java_理解方法调用

理解方法调用 首先什么是隐式参数 --->隐式参数是调用该方法的对象本身。 接下来方法的名称和参数列表被称为方法的签名&#xff08;signature&#xff09;。在Java中&#xff0c;方法的签名由方法的名称和参数列表组成&#xff0c;用于唯一标识一个方法。返回类型不是签名的…

Mysql存储引擎InnoDB

一、存储引擎的简介 MySQL 5.7 支持的存储引擎有 InnoDB、MyISAM、Memory、Merge、Archive、Federated、CSV、BLACKHOLE 等。 1、InnoDB存储引擎 从MySQL5.5版本之后&#xff0c;默认内置存储引擎是InnoDB&#xff0c;主要特点有&#xff1a; &#xff08;1&#xff09;灾难恢…

【MCU学习】GD32F427VG开发

&#xff08;一&#xff09;学习文档和例程 兆易创新GD32 MCU参考资料下载 1.GD232F4xx的Keil芯片支持包 2.标准固件库和示例程序 3.GD32F4xx_固件库使用指南_Rev1.2 4.用户手册&#xff1a;GD32F4xx_User_Manual_Rev2.8_CN 5.数据手册&#xff1a;GD32F427xx_Datasheet_Rev…

SpringMVC的注解

文章目录 前言前期准备ResponseBody 返回JSONRequestMapping 映射控制器GetMapping、PostMapping 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; SpringMVC框架只需要少量的配置即可快速实现Web应用程序开发&#xff0c;不需要大量的XML配置文件。 不…