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

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

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

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

/*** 数据缓存池* @param key 唯一标识* @param obj 被缓存的对象*/
function CachedObj() {this.cacheMap = new Map(); //? 缓存池this.get = (key, obj?) => { //* 获取某一个promise的数据(第一次执行设置,第二次执行获取)if (!this.cacheMap.has(key) && obj) {this.set(key, obj)}return this.cacheMap.get(key);}this.set = (key, obj) => { //* 设置某一个promise的数据this.cacheMap.set(key, obj);}this.delete = (key) => { //* 删除某一个promise的数据this.cacheMap.delete(key)}this.clear = () => { //* 清空重置所有的数据this.cacheMap.clear()}
}
const cachedObjInstance = new CachedObj()

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

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

公共的地方设置异步缓存池的构造器以及公共的构造器实例

/*** 异步缓存池* @param promise 被缓存的异步* @param key 唯一标识* @returns 同一个异步*/
function CachedPromise() {this.cacheMap = new Map(); //? 缓存池this.get = (key, promiseFn?) => { //* 获取某一个promise的数据(第一次执行设置,第二次执行获取)if (!this.cacheMap.has(key) && promiseFn) {this.set(key, promiseFn())}return this.cacheMap.get(key);}this.set = (key, promise) => { //* 设置某一个promise的数据this.cacheMap.set(key, promise);}this.delete = (key) => { //* 删除某一个promise的数据this.cacheMap.delete(key)}this.clear = () => { //* 清空重置所有的数据this.cacheMap.clear()}
}
const cachedPromiseInstance = new CachedPromise()

业务内使用

//todo 设置个性化待办的信息
const getWaitCustomizeInfo = async () => {if (AppModule.waitCustomizeInfo) { //* 单例模式,存在则不再请求接口return await AppModule.waitCustomizeInfo}const defaultCustomizeInfo = {waitPermission: 'personal', //? 默认”只看自己“}try {const res = await cachedPromise.get('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 CachedPromise(continueWhenFinished = false) {this.cacheMap = new Map(); //? 缓存池this.get = (key, promiseFn?) => { //* 获取某一个promise的数据(第一次执行设置,第二次执行获取)if (this.cacheMap.has(key)) { //* 已有缓存时// if (this.cacheMap.get(key).isFulfilled() && promiseFn) { //* 已有缓存,continueWhenFinished 为true,且缓存中的异步已经完成时,执行新的异步并缓存if (continueWhenFinished && typeof this.cacheMap.get(key).then !== 'function' && promiseFn) { //* 已有缓存,continueWhenFinished 为true,且缓存中的异步已经完成时,执行新的异步并缓存this.set(key, promiseFn())}}if (!this.cacheMap.has(key) && promiseFn) { //* 没有缓存数据时,进行设置this.set(key, promiseFn())}return this.cacheMap.get(key);}this.set = (key, promise) => { //* 设置某一个promise的数据this.cacheMap.set(key, promise);}this.delete = (key) => { //* 删除某一个promise的数据this.cacheMap.delete(key)}this.clear = () => { //* 清空重置所有的数据this.cacheMap.clear()}
}
const cachedPromiseInstance = new CachedPromise()```

注意实现
1、promise一旦新建就会立即执行,所以 要将promise保成函数传入;
2、构造器实例,必须在初始化调用接口的组件外部使用,才能起到缓存promise的作用;放在组件内,每次都会创建一个全新的缓存池
3、记得要处理promise rejected的场景

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

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

相关文章

LeetCode39:组合总和

题目: 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target ,找出 candidates 中可以使数字和为目标数 target 的 所有 不同组合 ,并以列表形式返回。你可以按 任意顺序 返回这些组合。 candidates 中的 同一个 数字可以 无限…

web:js原型污染简单解释

1. 什么是对象? 在 JavaScript 中,对象是一种包含属性和方法的数据结构。你可以把对象想象成一个存储键值对的容器。每个键(key)都有一个对应的值(value),这个值可以是数据或者函数。 let per…

智能听诊器:宠物健康教育的创新工具

智能听诊器通过其配套的应用程序,为宠物主人提供了丰富的教育资源,帮助他们更好地理解宠物的生理信号和健康管理知识。这些教育模块通常包括宠物生理指标的解释、常见疾病的识别以及如何进行日常的宠物护理。 智能听诊器通过提供这些教育资源&#xff0…

爱心曲线公式大全

local r a*((math.sin(angle) * math.sqrt(math.abs(math.cos(angle)))) / (math.sin(angle) 1.4142) - 2 * math.sin(angle) 2) local x r * math.cos(angle) -- 计算对应的x值 local z r * math.sin(angle) 1.5*a - --曲线公式绘画 local function generateParabola()…

【论文笔记】Flamingo: a Visual Language Model for Few-Shot Learning

🍎个人主页:小嗷犬的个人主页 🍊个人网站:小嗷犬的技术小站 🥭个人信条:为天地立心,为生民立命,为往圣继绝学,为万世开太平。 基本信息 标题: Flamingo: a Visual Langu…

第十四章 Redis之全局唯一ID(分布式集群)

目录 一、概念 ‌二、全局唯一ID的生成方法‌ 三、Redis生成全局ID 3.1. 生成策略 3.2. 代码 一、概念 全局唯一ID是指在分布式系统中,每个实体都有一个唯一的标识符,确保在不同的节点或服务之间能够唯一标识一个实体。这种唯一性对于数据的一致性…

Vue项目开发注意事项

事项一:项目代码放在本地怎么运行起来 1、首先确定项目对应的node和npm版本 node下载地址 Index of /dist/https://nodejs.org/dist/ node 与 npm版本对应关系 Node.js — Node.js Releases 2、node卸载的时候,会自动把对应的npm卸载掉 情况1&…

2024-你自学网络安全的顺序可能一直是反的!

作为一名在网络安全领域工作了八年的技术人员,我想分享一些经验给2024年学习黑客技术的朋友们。 千万不要毫无基础就开始学黑客!一定要先了解相关的信息和知识! 对于刚入行的朋友,我建议先从网络安全或Web安全/渗透测试入手,这些方向市场需求…

【优选算法】(第二十八篇)

目录 K个⼀组翻转链表(hard) 题目解析 讲解算法原理 编写代码 两数之和(easy) 题目解析 讲解算法原理 编写代码 K个⼀组翻转链表(hard) 题目解析 1.题目链接:. - 力扣(Leet…

掌握RocketMQ——基本概念和系统架构

简述RcoketMQ 概念:RocketMQ是一个开源的分布式消息中间件,由阿里巴巴开发并贡献给Apache软件基金会。它用于处理高吞吐量、低延迟的消息传递,并广泛应用于现代分布式系统中。 1 基本概念 1.1 消息 (Message) 概念:消息是信息传…

【AI知识点】度量学习(Metric Learning)

简介 度量学习(Metric Learning)是一种机器学习方法,目标是通过学习一个距离度量函数,使得在特征空间中,相似的样本距离更近,不相似的样本距离更远。简单来说,它是在特征空间中定义一种适当的距…

Ubuntu24.04远程开机

近来在几台机器上鼓捣linux桌面,顺便研究一下远程唤醒主机。 本篇介绍Ubuntu系统的远程唤醒,Windows系统的唤醒可搜索相关资料。 依赖 有远程唤醒功能的路由器(当前一般都带这个功能)有线连接主机(无线连接有兴趣朋友…

Pikachu-Sql-Inject -基于boolian的盲注

基于boolean的盲注: 1、没有报错信息显示; 2、不管是正确的输入,还是错误的输入,都只显示两种情况,true or false; 3、在正确的输入下,输入and 1 1/and 1 2发现可以判断; 布尔盲注常用函数&…

YOLO11改进|注意力机制篇|引入反向残差移动快iRMB

目录 一、【iRMB】注意力机制1.1【iRMB】注意力介绍1.2【iRMB】核心代码 二、添加【iRMB】注意力机制2.1STEP12.2STEP22.3STEP32.4STEP4 三、yaml文件与运行3.1yaml文件3.2运行成功截图 一、【iRMB】注意力机制 1.1【iRMB】注意力介绍 反向残差移动快iRMB结构如下所示&#xf…

【Canvas与标牌】盾形银底红带Best Quality Premium标牌

【成图】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>BestQulityPremium金属牌重制版Draft2</title><style type&…

雷池+frp 批量设置proxy_protocol实现真实IP透传

需求 内网部署safeline&#xff0c;通过frp让外网访问内部web网站服务&#xff0c;让safeline记录真实外网攻击IP safeline 跟 frp都部署在同一台服务器&#xff1a;192.168.2.103 frp client 配置 frpc只需要在https上添加transport.proxyProtocolVersion "v2"即…

旅游管理智能化转型:SpringBoot系统设计与实现

第四章 系统设计 4.1系统结构设计 对于本系统的开发设计&#xff0c;先自上向下&#xff0c;将一个完整的系统分解成许多个小系统来进行实现&#xff1b;再自下向上&#xff0c;将所有的“零件”组装成一个大的、完整的系统。因此这里面的许多个小功能块都要对将要实现的功能进…

用Python集成免费IP归属地查询API

IP查询的优势是什么&#xff1f; IP查询是一种强大的工具&#xff0c;能够快速提供关于IP地址的信息&#xff0c;如地理位置、互联网服务提供商&#xff08;ISP&#xff09;、连接类型等。这些数据在多种场景下都非常有用&#xff0c;帮助用户理解网络环境和用户行为。 首先&…

[哈希/二分]P1102 A-B 数对 - 洛谷

P1102 A-B 数对 - 洛谷 | 计算机科学教育新生态 题目来源 洛谷 题目内容 A-B 数对 题目背景 出题是一件痛苦的事情&#xff01; 相同的题目看多了也会有审美疲劳&#xff0c;于是我舍弃了大家所熟悉的 AB Problem&#xff0c;改用 A-B 了哈哈&#xff01; 题目描述 给…

Pikachu-Sql-Inject - 基于时间的盲注

基于时间的盲注&#xff1a; 就是前端的基于time 的盲注&#xff0c;什么错误信息都看不到&#xff0c;但是还可以通过特定的输入&#xff0c;判断后台的执行时间&#xff0c;从而确定注入。 mysql 里函数sleep() 是延时的意思&#xff0c;sleep(10)就是数据库延时10 秒返回内…