JS 缓存函数一、普通函数结果缓存同步缓存实现一个通用缓存高阶函数核心逻辑第一次执行计算并缓存结果后续相同参数直接读取缓存不再重复执行。实现代码// 缓存高阶函数接收一个函数返回带缓存的新函数constmemoize(fn){// 利用闭包持久化缓存数据不会被垃圾回收constcachenewMap();return(...args){// 将参数序列化为字符串作为缓存的唯一 keyconstkeyJSON.stringify(args);// 缓存命中直接返回缓存结果if(cache.has(key)){returncache.get(key);}// 缓存未命中执行原函数计算结果constresultfn(...args);// 将结果存入缓存cache.set(key,result);returnresult;};}使用示例// 模拟耗时计算函数constcalc(a,b){console.log(执行计算...);returnab;};// 生成带缓存的函数constcachedCalcmemoize(calc);// 第一次调用执行原函数打印“执行计算...”console.log(cachedCalc(1,2));// 第二次调用直接读取缓存无打印console.log(cachedCalc(1,2));核心要点借助闭包保存cache实现数据持久化用JSON.stringify(args)生成唯一缓存键空间换时间避免重复计算提升执行效率相同参数只会执行一次原函数二、异步函数缓存Promise 缓存池异步函数不能直接缓存执行结果因为并发调用时结果还未返回会重复发起请求。正确方案缓存 Promise 本身让多次调用共用同一个异步任务。实现代码constmemoizeAsync(fn){constcachenewMap();return(...args){constkeyJSON.stringify(args);// 缓存存在直接返回已有的 Promiseif(cache.has(key)){returncache.get(key);}// 执行异步函数生成 Promiseconstpromisefn(...args);// 将 Promise 存入缓存cache.set(key,promise);// 请求失败时清除缓存保证下次可重试promise.catch(()cache.delete(key));returnpromise;};}使用示例// 模拟异步接口请求constfetchDataasync(id){console.log(真实接口请求:,id);awaitnewPromise(resolvesetTimeout(resolve,500));return{id};};constcachedFetchmemoizeAsync(fetchData);// 并发多次调用仅发起一次请求cachedFetch(1).then(console.log);cachedFetch(1).then(console.log);cachedFetch(1).then(console.log);核心关键点缓存对象是Promise而非最终结果并发调用可共用同一个 Promise避免重复请求请求失败自动清理缓存支持重新请求相同参数永远只执行一次异步逻辑三、带过期时间的异步缓存TTL 可控缓存在异步缓存基础上增加过期机制避免缓存永久占用同时控制数据新鲜度。实现代码// ttl缓存过期时间默认 60 秒constmemoizeAsyncWithTTL(fn,ttl60000){constcachenewMap();return(...args){constkeyJSON.stringify(args);// 判断缓存是否存在if(cache.has(key)){const{promise,expire}cache.get(key);// 缓存未过期直接使用if(Date.now()expire){returnpromise;}// 缓存已过期删除旧数据cache.delete(key);}// 执行异步任务constpromisefn(...args);// 存入缓存并记录过期时间cache.set(key,{promise,expire:Date.now()ttl});// 请求失败清除缓存promise.catch(()cache.delete(key));returnpromise;};}使用示例// 模拟接口请求constfetchDataasync(id){console.log(发起请求,id);awaitnewPromise(resolvesetTimeout(resolve,500));return{id};};// 缓存有效期 3 秒constcachedFetchmemoizeAsyncWithTTL(fetchData,3000);// 第一次调用发起请求cachedFetch(1).then(console.log);// 3秒内重复调用使用缓存cachedFetch(1).then(console.log);// 3秒后调用缓存过期重新发起请求setTimeout((){cachedFetch(1).then(console.log);},3000);核心亮点支持 Promise 共享解决并发重复请求问题自带 TTL 过期机制自动清理无效缓存请求失败可重试健壮性更强基于闭包 Map 实现通用简洁无外部依赖适用于接口请求、数据查询、异步计算等场景