JavaScript异步函数中Google表格数据复用问题咨询

核心解决思路 #

• 缓存数据，避免重复请求：只发起一次Google表格数据请求，后续所有操作都复用缓存的结果
• 利用Promise处理异步：通过缓存请求的Promise对象，确保需要使用数据时，数据已经加载完成

具体实现代码及步骤 #

1. 添加全局缓存变量

先声明一个全局变量，用来缓存数据请求的Promise（而非直接存数据），避免异步加载时的竞态问题：

// 全局缓存数据请求的Promise，初始为空
let cachedDataPromise;

2. 封装缓存数据获取函数

写一个专门的函数获取数据，仅在缓存不存在时发起新请求：

async function getCachedData() {
    // 若未发起过请求，调用fetchData并缓存它的Promise
    if (!cachedDataPromise) {
        cachedDataPromise = fetchData();
    }
    // 返回缓存的Promise结果（首次调用等待请求完成，后续直接返回已加载的数据）
    return cachedDataPromise;
}

3. 修改LoadData函数，复用缓存数据

将原每次调用fetchData()的逻辑替换为getCachedData()，同时让下拉菜单初始化逻辑仅执行一次：

async function LoadData(selectedData = 0, loadThing = false) {
    // 从缓存获取数据，首次调用发起请求，后续直接复用缓存
    const data = await getCachedData();

    if (loadThing) {
        // 仅初始化时加载下拉菜单，避免重复执行
        for (let i = 0; i < 5; i++) {
            MakeCoolDropdown(data.values[dataEnum.Date][i], i);
        }
    }

    // 用缓存数据更新页面内容
    const keys = Object.keys(dataEnum);
    for (let i = 1; i < 5; i++) {
        const key = keys[i];
        PutInHtml(key, data.values[dataEnum[key]][selectedData]);
    }
}

4. 页面初始化时预加载数据

在页面加载完成后主动初始化下拉菜单，无需等待用户点击：

// 页面加载完成后，先初始化下拉菜单
document.addEventListener('DOMContentLoaded', () => {
    LoadData(0, true);
});

// 下拉菜单点击事件：仅更新页面数据，不再重复请求表格
const dropdown = document.getElementById("dropdown2_The_Movie");
dropdown.addEventListener('click', function() {
    LoadData(this.selectedIndex);
});

方案优势 #

• 杜绝重复请求：cachedDataPromise缓存首次请求的Promise，后续调用不会发起新的网络请求
• 解决异步全局变量问题：缓存Promise而非直接存数据，await会自动等待请求完成，避免数据未就绪就被使用
• 简化函数逻辑：抽离数据请求逻辑，LoadData仅负责页面更新，不再臃肿冗余

内容的提问来源于stack exchange，提问作者Pyr0Guy