JavaScript 中异步数据的弱引用缓存怎么使用 WeakMap 结合 Promise 优化内存-js教程-PHP中文网

WeakMap 缓存异步数据应缓存 Promise 的结果而非 Promise 实例，因后者可能强引用外部变量导致内存泄漏；以请求源对象为键可实现自动清理，配合 AbortController 能进一步避免悬空请求。

javascript 中异步数据的弱引用缓存怎么使用 weakmap 结合 promise 优化内存

用 WeakMap 缓存异步数据本身不直接“缓存 Promise”，而是缓存 Promise 的结果，并借助 WeakMap 的弱引用特性，让缓存生命周期与请求源对象（如用户对象、DOM 元素、配置实例）自动对齐——源对象被回收时，缓存条目也自动消失，避免内存泄漏。

为什么不能直接缓存 Promise 实例？

Promise 一旦创建，其状态（pending/fulfilled/rejected）会持续存在，直到被消费或被 GC。若将 Promise 作为值存入 WeakMap，而该 Promise 又持有对外部作用域（如大型数据、闭包变量）的引用，就可能意外延长这些资源的存活时间。更稳妥的做法是：只缓存已 resolve 的结果，或用“缓存状态 + 原始 Promise 引用管理”策略。

缓存 pending Promise 容易造成重复请求（需额外去重逻辑）
缓存已 resolve 的值更安全、可预测，且天然支持“结果复用”
WeakMap 不负责 Promise 生命周期，只负责键对象的弱引用管理

标准做法：以请求源对象为键，缓存最终数据

典型场景：按用户对象拉取资料，用户实例销毁后，对应缓存应自动清理。

const userCache = new WeakMap();

async function getUserProfile(user) {
  // 若已有缓存，直接返回
  if (userCache.has(user)) {
    return userCache.get(user);
  }

  // 发起请求
  const profile = await fetch(`/api/users/${user.id}`)
    .then(r => r.json());

  // 存入 WeakMap —— 键是 user（对象），值是结果（任意类型）
  userCache.set(user, profile);
  return profile;
}

// 使用示例
const alice = { id: 123, name: 'Alice' };
getUserProfile(alice).then(p => console.log(p));

// 后续 alice = null; → 下次 GC 时，userCache 中该条目自动失效

进阶：支持 Promise 状态缓存（防重复请求）

如果想避免同一 user 多次调用触发多个并发请求，可缓存 Promise 本身，但要确保 Promise 不阻止 user 对象回收。关键是：Promise 回调中不强引用 user（例如不闭包捕获 user，或仅在 then 中使用局部参数）。

java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

const userRequestCache = new WeakMap();

async function getUserProfileSafe(user) {
  if (userRequestCache.has(user)) {
    return userRequestCache.get(user);
  }

  // 创建并立即执行的 Promise，不闭包持有 user（user 仅作为参数传入）
  const promise = fetch(`/api/users/${user.id}`)
    .then(r => r.json())
    .catch(err => {
      // 清理失败缓存（可选）
      userRequestCache.delete(user);
      throw err;
    });

  userRequestCache.set(user, promise);
  return promise;
}

Promise 本身不强引用 user，只要 fetch 调用不把 user 挂在 request body 或 headers 里长期持有，user 就仍可被回收
WeakMap 的键（user）一旦不可达，整个条目（包括 promise）会被 GC 清除，即便 promise 还在 pending 状态
注意：pending promise 若含未释放的资源（如未 abort 的 AbortController），需额外处理；建议配合 signal 控制

搭配 AbortController 避免悬空请求

当 key 对象（如 DOM 元素或组件实例）即将销毁，可主动中止关联请求，进一步减少无效计算和网络开销：

const controllerCache = new WeakMap();

async function fetchWithAbort(target, url) {
  let controller = controllerCache.get(target);
  if (!controller) {
    controller = new AbortController();
    controllerCache.set(target, controller);
  }

  try {
    const res = await fetch(url, { signal: controller.signal });
    return res.json();
  } catch (err) {
    if (err.name === 'AbortError') {
      console.log('请求已被中止');
    }
    throw err;
  }
}

// 销毁前调用（例如 React useEffect cleanup 或元素移除时）
function cleanupFor(target) {
  const controller = controllerCache.get(target);
  if (controller) controller.abort();
  controllerCache.delete(target);
}

这样既利用 WeakMap 自动清理缓存，又通过显式 abort 减少 pending 请求堆积。