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

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

背景简介

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

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

js 复制代码
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

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

js 复制代码
/**
 * 异步缓存池 ------ 闭包版本
 * @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.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 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的场景
相关推荐
Mintopia33 分钟前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
慌糖37 分钟前
RabbitMQ:消息队列的轻量级王者
开发语言·javascript·ecmascript
Mintopia43 分钟前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
MrSkye1 小时前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
爱学习的茄子1 小时前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试
zhanshuo1 小时前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
讨厌吃蛋黄酥2 小时前
智能前端新纪元:语音交互技术与安全实践全解析
javascript
1234Wu2 小时前
React Native 接入 eCharts
javascript·react native·react.js
脑袋大大的9 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络11 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码