wordpress改网页电话,苏州seo公司排名,成都it外包公司,商务网站建设教学视频教程减少重复的请求之promise缓存池 —— 缓存promise#xff0c;多次promise等待并返回第一个promise的结果
背景简介 当一个业务组件初始化调用了接口#xff0c;统一个页面多吃使用同一个组件#xff0c;将会请求大量重复的接口
如果将promise当作一个普通的对象#xff0…减少重复的请求之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的场景
