Javascript。从异步函数写入数据

Question

对于我的项目，我正在等待并从 Google Spreadsheet 下载数据。我的问题是，每次用户单击下拉菜单时，LoadData 函数都会播放，因此 LoadData 函数会再次从 google 表加载相同的数据，最大的问题是，除了 LoadData 函数之外，我无法在其他任何地方使用此数据使它变得巨大并做了其他不必要的事情，这些事情可以一次完成。解决方案是将变量数据卸载到全局范围或至少从 LoadData 函数加载数据，但这是不可能的，因为我需要一个异步函数。我该怎么办？

这是代码：

async function fetchData(){
    const dataResponse = await fetch(urls);
    const data = await dataResponse.json();
    return data;
}

async function LoadData(selectedData = 0, loadThing = false)
{
    let data = await fetchData();
    if(loadThing)
    {
        //Load date to the DropDown
        for(let i = 0; i < 5; i++)
            MakeCoolDropdown(data.values[dataEnum.Date][i], i);  
    }

    let keys = Object.keys(dataEnum);
    for(let i = 1; i < 5; i++)
    {
        //Put Values from data to HTML page
        let key = keys[i];
        PutInHtml(key, data.values[dataEnum[key]][selectedData]);
    }
}

let btn = document.getElementById("dropdown2_The_Movie");

btn.addEventListener('click', function()
{
    let dropdownID      = document.getElementById("dropdown2_The_Movie");
    let dropdownValue   = dropdownID.selectedIndex;
    LoadData(dropdownValue);
});

Answer 1

获取资源一次，存储在脚本范围内的变量中，或其他地方

let data = void 0;

async function fetchData(){
    const dataResponse = await fetch(urls);
    const data = await dataResponse.json();
    return data;
}

async function LoadData(selectedData = 0, loadThing = false) {
  // Load data exactly once from the network
  if (data === undefined) {
    data = await fetchData();
  }
  // ...
}