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

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

背景简介

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

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

js 复制代码
/**
 * 数据缓存池
 * @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

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

js 复制代码
/**
 * 异步缓存池
 * @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()

业务内使用

js 复制代码
//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.data
      const savedInfo = personalMenus.menuPersonalValue ? JSON.parse(personalMenus.menuPersonalValue).headerValue : defaultCustomizeInfo
      const waitCustomizeInfo = { id: personalMenus.id, ...savedInfo }
      AppModule.setWaitCustomizeInfo(waitCustomizeInfo)
      return waitCustomizeInfo
    }
    AppModule.setWaitCustomizeInfo(defaultCustomizeInfo)
    return defaultCustomizeInfo;
  } catch (error) {
    AppModule.setWaitCustomizeInfo(defaultCustomizeInfo)
    return defaultCustomizeInfo;
  }
}

完美解决!!!

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

js 复制代码
/**
 * 异步缓存池
 * @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的场景

相关推荐
excel9 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel10 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼12 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping12 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙13 小时前
[译] Composition in CSS
前端·css
白水清风13 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix13 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780013 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端13 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧13 小时前
Promise 的使用
前端·javascript