JavaScript异步数据缓存：实现单次查询与数据复用-js教程-PHP中文网

JavaScript异步数据缓存：实现单次查询与数据复用

心靈之曲

发布： 2025-10-01 10:48:08

原创

936人浏览过

JavaScript异步数据缓存：实现单次查询与数据复用

本文探讨了如何在JavaScript异步编程中避免重复的数据库查询，实现数据的高效复用。通过介绍空值合并赋值运算符（??=）结合Promise的延迟初始化机制，我们将展示如何仅执行一次异步数据获取操作，并将返回的Promise对象缓存起来，供后续函数重复使用，从而显著提升应用性能并减少数据库负载。

异步数据获取中的重复查询问题

在现代web应用开发中，与数据库或其他外部api进行异步交互是常见的操作。为了优化性能和减少服务器负载，我们通常希望对相同的数据只进行一次查询，然后将结果缓存起来供后续函数使用。然而，在不恰当的实现下，我们可能会遇到重复查询的问题。

考虑以下JavaScript代码片段，它尝试通过一个全局变量来缓存异步获取的数据：

async function GetCoverage(scroll_path) {
  // 模拟一个异步DB或API调用
  console.log(`Executing GetCoverage for: ${scroll_path}`);
  return new Promise(resolve => {
    setTimeout(() => {
      resolve([{ id: 1, path: scroll_path, data: Math.random() }]);
    }, 500);
  });
}

let dataGlobal; // 用于存储数据或Promise

const getData = async () => {
  const response = await GetCoverage("all"); // 每次调用都会触发GetCoverage
  dataGlobal = response;
  return response;
};

(async () => {
  console.log("Initial call to getData...");
  await getData();
  console.log("dataGlobal after first call:", dataGlobal);

  console.log("\nSecond call to getData...");
  await getData(); // 这会再次调用GetCoverage
  console.log("dataGlobal after second call:", dataGlobal);
})();

登录后复制

在上述代码中，getData 函数每次被调用时，都会执行 await GetCoverage("all")，这意味着无论 dataGlobal 是否已经有值，GetCoverage 函数（模拟数据库查询）都会被重新触发。这导致了不必要的数据库查询，浪费了资源并增加了响应时间。

解决方案：Promise的延迟初始化与缓存

为了解决重复查询的问题，我们需要一种机制来：

延迟初始化：仅在数据首次被请求时才执行异步查询。
缓存Promise：将异步查询返回的 Promise 对象缓存起来，而不是等待它解析后的数据。这样，后续的请求可以直接返回这个已缓存的 Promise，无论它是处于待定（pending）、已解决（resolved）还是已拒绝（rejected）状态。

JavaScript中的空值合并赋值运算符 (??=) 提供了一种简洁高效的方式来实现这一目标。

立即学习“Java免费学习笔记（深入）”；

空值合并赋值运算符 (??=) 简介

??= 运算符是一个逻辑赋值运算符。它的语法是 a ??= b，等同于 a = a ?? b。这意味着如果 a 是 null 或 undefined（即“空值”），那么 a 将被赋值为 b 的值；否则，a 的值保持不变。

腾讯智影-AI数字人

基于AI数字人能力，实现7*24小时AI数字人直播带货，低成本实现直播业务快速增增，全天智能在线直播

查看详情

利用 ??= 运算符的这一特性，我们可以非常优雅地实现Promise的延迟初始化和缓存。

实现单次查询与数据复用

我们将 dataGlobal 变量用于存储 GetCoverage 返回的 Promise。getData 函数的职责将变为：如果 dataGlobal 尚未被赋值（即为 undefined 或 null），则调用 GetCoverage 并将其返回的 Promise 赋值给 dataGlobal；否则，直接返回 dataGlobal 中已存在的 Promise。

// 假设 GetCoverage 函数已定义，与上面示例相同
async function GetCoverage(scroll_path) {
  console.log(`Executing GetCoverage for: ${scroll_path}`);
  return new Promise(resolve => {
    setTimeout(() => {
      resolve([{ id: 1, path: scroll_path, data: Math.random() }]);
    }, 500);
  });
}

let dataGlobalPromise; // 用于存储GetCoverage返回的Promise

const getData = () => (dataGlobalPromise ??= GetCoverage("all")); // 核心优化

// 演示如何使用
(async () => {
  console.log("Making parallel calls to getData...");

  // 第一次调用 getData() 会触发 GetCoverage("all")
  // 并将返回的 Promise 赋值给 dataGlobalPromise
  const result1Promise = getData();

  // 第二次调用 getData() 会直接返回 dataGlobalPromise 中已有的 Promise
  const result2Promise = getData();

  // 第三次调用 getData() 同样直接返回已有的 Promise
  const result3Promise = getData();

  // 等待所有 Promise 解析
  const [result1, result2, result3] = await Promise.all([
    result1Promise,
    result2Promise,
    result3Promise
  ]);

  console.log("Result #1:", result1);
  console.log("Result #2:", result2);
  console.log("Result #3:", result3);

  console.log("\nConfirming dataGlobalPromise content:", dataGlobalPromise);

  // 再次调用 getData，验证 GetCoverage 不会再次执行
  console.log("\nCalling getData again to verify no new GetCoverage execution...");
  const result4 = await getData();
  console.log("Result #4:", result4);

})();

登录后复制

代码解析：

let dataGlobalPromise;：声明一个变量，初始值为 undefined。
const getData = () => (dataGlobalPromise ??= GetCoverage("all"));：这是核心所在。
- 首次调用 getData() 时：dataGlobalPromise 是 undefined，满足 ??= 的条件。GetCoverage("all") 会被执行，返回一个 Promise 对象。这个 Promise 对象随后被赋值给 dataGlobalPromise，并作为 getData 函数的返回值。此时，控制台会输出 Executing GetCoverage for: all。
- 后续调用 getData() 时：dataGlobalPromise 已经包含了之前赋值的 Promise 对象（无论它是否已解决）。此时 dataGlobalPromise 不再是空值，因此 ??= 运算符的右侧表达式 GetCoverage("all") 不会被执行。getData 函数直接返回 dataGlobalPromise 中已存在的 Promise 对象。控制台不会再次输出 Executing GetCoverage for: all。

通过这种方式，无论 getData 被调用多少次，GetCoverage 函数（模拟数据库查询）都只会被执行一次。所有对 getData 的调用都会返回同一个 Promise 对象，它们最终都会解析出相同的数据。

优势与注意事项

优势

性能提升：显著减少了不必要的数据库或API查询，降低了服务器负载，提高了应用程序的响应速度。
代码简洁：使用 ??= 运算符使缓存逻辑变得非常紧凑和易读。
并发处理：即使多个函数同时请求数据，它们也会共享同一个 Promise，避免了竞态条件和重复工作。

注意事项

错误处理：如果 GetCoverage 函数返回的 Promise 被拒绝（例如，数据库连接失败），那么 dataGlobalPromise 将会是一个被拒绝的 Promise。所有后续调用 getData().then(...) 的 catch 块都将捕获到这个错误。这是期望的行为，但需要确保你的代码能够正确处理这种情况。
数据时效性：这种方法实现了永久缓存，除非应用程序重启或手动清除 dataGlobalPromise。如果数据需要定期刷新或根据某些条件失效，你需要额外的逻辑来重置 dataGlobalPromise（例如，将其设为 undefined 或 null），以便下次调用 getData 时能重新获取数据。
作用域：dataGlobalPromise 变量的声明位置决定了缓存的作用域。在模块顶级声明它，可以使其在整个模块生命周期内有效。如果希望缓存仅在特定组件或类实例中有效，则应将其作为组件状态或类属性进行管理。

总结

通过巧妙地结合JavaScript的空值合并赋值运算符 (??=) 和Promise机制，我们可以高效地实现异步数据的单次查询与多处复用。这种模式在需要缓存异步操作结果以避免重复执行的场景中非常有用，例如获取配置信息、用户会话数据或任何不经常变动且需要全局访问的数据。理解并应用这种模式，能够显著优化应用程序的性能和资源利用效率。

以上就是JavaScript异步数据缓存：实现单次查询与数据复用的详细内容，更多请关注php中文网其它相关文章！