Javascript 如何一次调用api并将数据发送到多个JS文件

我正在创建一个查询数据库的网站

我使用nodejs-express创建了一个API-get方法来从数据库中获取数据

大概是这样的：

app.get('/getLatestData', (req, res) => {
     var dataArray;
     //some code here to get the array
     res.send(dataArray);
});

fetch('/getLatestDevice')
        .then(res=>res.json())
        .then(data => {
            newWeight = data.eight
         })
        .catch(err => {
            console.log('error')
        });

因此，如果我调用getLatestData，我将得到一个数组，该数组包含我需要的内容，我们可以这样说：

dataArray=[humanName:abc，humanAge:25，humanWeight:……等]

利用这个，我创建了一个网站，在那里我可以显示信息，比如他的体重随时间变化的图表，或者一些文本，比如他的名字和年龄，作为一个字符串

HTML文件：

<div class="container">
        <div class="text" id="text2">
            <script src="sketch.js"></script>
        </div>
        <div class="chart">
            <canvas id="bar-chart" width="500" height="500">
                <script src="bargraph.js"></script>
            </canvas>
        </div>
</div>

---

我不想在所有这些不同的JS文件中不断调用这个API fetch，因为最新的数据可能会改变，我可能会访问它的不同实例，有没有一种方法可以让我调用API get一次，将它放入一个变量中，并将其传输到不同的文件中，而不是单独在每个文件中执行它？

在JS中，顶级声明变量是全局的，这是福也是祸。你可以利用这个优势。声明一个全局变量，并将API调用的响应保存在该变量中。然后您可以在所有JS文件中访问它，只需将fetch方法的结果分配给一个全局变量，如下所示：

window.latestDevice = undefined; // Global accessible variable
const request = fetch('/getLatestDevice').then((response) => {
      return response.json();
    }).then((data) => {
      window.latestDevice = data;
    });

---

然后，您应该能够从JS文件中获取

window.latestDevice

数据。

如果我有多个JS文件，我应该在哪里声明全局变量？为了方便起见，在导入到htmlor的第一个文件中声明它，只需在每个页面检查

window.variableNameHere

并继续。现在，如果您希望这是一个反应式的过程，也就是说，当变量更新时，其他部分都会更新，这是一个更棘手的问题哦，所以我只需在我的第一个JS文件中调用api，比如：var thisDataArray=getLatestData（）然后我可以在其他文件中访问此DataArray。由于api调用的异步性质，以这种方式设置它将不起作用。在顶部声明它，但将其设置在fetch响应中。Jhecht方法也适用