本文探讨了如何在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; // 用于存储数据或Promiseconst 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 的值保持不变。
利用 ??= 运算符的这一特性，我们可以非常优雅地实现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返回的Promiseconst 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异步数据缓存：实现单次查询与数据复用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1525088.html
微信扫一扫 
支付宝扫一扫 
