时间戳

首页 > 解决方案 > 如何调用一次api并将数据发送到多个JS文件

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

问题描述

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

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

像这样的东西：

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

所以如果我调用 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>

现在您可以在这种情况下看到我有 2 个 javascript 文件：bargraph.js 和 sketch.js，我遇到的问题是，在每个 javascript 文件中，我都在查询 API getLatestData，如下所示：

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

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

标签： javascriptjquerynode.jsapifetch

解决方案

只需将 fetch 方法的结果分配给全局变量，如下所示：

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

然后你应该能够window.latestDevice从你的 JS 文件中获取数据。

推荐阅读