当前位置：首页 > news >正文

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

news 2025/5/11 5:18:37

减少重复的请求之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()```