减少重复的请求之promise缓存池(闭包版) —— 缓存promise,多次promise等待并返回第一个promise的结果

news/2024/12/21 5:10:14/

减少重复的请求之promise缓存池 —— 缓存promise,多次promise等待并返回第一个promise的结果

背景简介
当一个业务组件初始化调用了接口,统一个页面多吃使用同一个组件,将会请求大量重复的接口

如果将promise当作一个普通的对象,进行缓存

function cacheObj() {const cacheMap = new Map(); //? 缓存池return (key, obj?) => {if (!cacheMap.has(key) && obj) { //* 没有缓存数据时,进行设置cacheMap.set(key, obj)}return cacheMap.get(key)}
}
const cacheObjCommon = cacheObj()

此时会发现,依旧会多次执行相同的promise(调用多个相同的接口),所以
promise的缓存,难点是如何将一旦新建就会立即执行的promise缓存

那如何让promise步立即执行,我想到了函数,第一个设置并缓存promise时,执行promise

公共的地方设置异步缓存池的闭包

/*** 异步缓存池 —— 闭包版本* @param key 唯一标识* @param promise 被缓存的异步* @param promiseFn 返回需要缓存异步的函数*/
function cachePromise(continueWhenFinished = false) {const cacheMap = new Map(); //? 缓存池return (key, promiseFn?) => {if (!cacheMap.has(key) && promiseFn) { //* 没有缓存数据时,进行设置cacheMap.set(key, promiseFn())}return cacheMap.get(key)}
}
const cachePromiseCommon = cachePromise()```业务内使用
```js
import { cachePromiseCommon as cachePromise } from '@/components/BaseSearchTable/utils';const getWaitCustomizeInfo = async () => {if (AppModule.waitCustomizeInfo) { //* 单例模式,存在则不再请求接口return AppModule.waitCustomizeInfo}const defaultCustomizeInfo = {waitPermission: 'personal', //? 默认”只看自己“}try {const res = await cachePromise('globalWaitCustomizeInfo', () => system.userMenuPersonal.userMenuPersonalDetail.request({ menuCode: 'globalWaitCustomizeInfo' }))if (res.data) {const personalMenus = res.dataconst savedInfo = personalMenus.menuPersonalValue ? JSON.parse(personalMenus.menuPersonalValue).headerValue : defaultCustomizeInfoconst waitCustomizeInfo = { id: personalMenus.id, ...savedInfo }AppModule.setWaitCustomizeInfo(waitCustomizeInfo)return waitCustomizeInfo}AppModule.setWaitCustomizeInfo(defaultCustomizeInfo)return defaultCustomizeInfo;} catch (error) {AppModule.setWaitCustomizeInfo(defaultCustomizeInfo)return defaultCustomizeInfo;}
}

完美解决!!!

当缓存中的异步完成后,还继续执行下一个异步时,可以改造一下,使用isFulfilled或者then来判断,异步是否完成

/*** 异步缓存池 —— 闭包版本* @param continueWhenFinished 当缓存中的异步完成后,继续执行下一个异步* @param key 唯一标识* @param promise 被缓存的异步* @param promiseFn 返回需要缓存异步的函数*/
function cachePromise(continueWhenFinished = false) {const cacheMap = new Map(); //? 缓存池return (key, promiseFn?) => {if (cacheMap.has(key)) { //* 已有缓存时// if (this.cacheMap.get(key).isFulfilled() && promiseFn) { //* 已有缓存,continueWhenFinished 为true,且缓存中的异步已经完成时,执行新的异步并缓存if (continueWhenFinished && typeof cacheMap.get(key).then !== 'function' && promiseFn) { //* 已有缓存,continueWhenFinished 为true,且缓存中的异步已经完成时,执行新的异步并缓存cacheMap.set(key, promiseFn())}}if (!cacheMap.has(key) && promiseFn) { //* 没有缓存数据时,进行设置cacheMap.set(key, promiseFn())}return cacheMap.get(key)}
}
const cachePromiseCommon = cachePromise()
> 注意实现
1、promise一旦新建就会立即执行,所以 要将promise保成函数传入;
2、构造器实例,必须在初始化调用接口的组件外部使用,才能起到缓存promise的作用;放在组件内,每次都会创建一个全新的缓存池
3、记得要处理promise rejected的场景

http://www.ppmy.cn/news/1536908.html

相关文章

大数据毕业设计选题推荐-B站热门视频数据分析-Python数据可视化-Hive-Hadoop-Spark

✨作者主页:IT研究室✨ 个人简介:曾从事计算机专业培训教学,擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…

【汇编语言】寄存器(CPU工作原理)(二)—— 汇编指令的基础操作

文章目录 前言正文——(一气呵成解决本文内容)结语 前言 📌 汇编语言是很多相关课程(如数据结构、操作系统、微机原理)的重要基础。但仅仅从课程的角度出发就太片面了,其实学习汇编语言可以深入理解计算机底…

平时使用的正则总结

1、将某一个字符串的后缀名后面加上“!400_500” 使用场景是将minio拿过来的图片压缩尺寸从而压缩其大小,加快渲染的速度。需要在图片的后缀名后面加上尺寸如下: const str //storage-test.test.shiqiao.com/gateway/common/isopen/2024/10/09/e708e9…

基于springboot+vue人脸识别的考勤管理系统(源码+定制+开发)

博主介绍: ✌我是阿龙,一名专注于Java技术领域的程序员,全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师,我在计算机毕业设计开发方面积累了丰富的经验。同时,我也是掘金、华为云、阿里云、InfoQ等平台…

反射的N种渲染方式

概述 本节主要介绍游戏图形渲染中几种反射效果的原理、实现方式及其应用场景 主要内容 反射在游戏尤其是3D游戏中的使用场景 从原理、优缺点及适用场合等几个方面,分别分析四种反射效果的实现方法 反射效果的性能优化技术,如立方体影射的原理、如何处…

金融风险管理中的量化模型与算法应用

随着金融市场的日益复杂和全球化,风险管理成为金融机构不可忽视的核心领域。量化模型和算法的引入,为金融风险管理提供了科学、系统的解决方案,极大地提高了风险识别和控制的效率与准确性。本文将探讨金融风险管理中的常用量化模型及其应用场…

dba_free_space 视图查询慢 X$KTFBUE

1.监控程序 dba_free_space 视图查询慢,访问基表X$KTFBUE时间较长,且多为单块读db file sequential read。 SQL> set linesize 500 pagesize 50000 long 999999 longchunksize 999999 SQL> select dbms_sqltune.report_sql_monitor(sql_id > 4p…

开源的键鼠共享工具「GitHub 热点速览」

十一长假回来,我的手放在落灰的键盘上都有些陌生了,红轴竟敲出了青轴般的响声,仿佛在诉说对假期结束的不甘。 假期回归的首更,让我们看看又有什么好玩的开源项目冲上了开源热榜。一套键盘和鼠标控制多台电脑的工具 deskflow&#…