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

【问题标题】：How to call api once and send data to multiple JS files如何调用一次api并将数据发送到多个JS文件
【发布时间】：2020-05-29 13:32:28
【问题描述】：

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

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

类似这样的：

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

所以如果我调用 getLatestData 我会得到一个包含我需要的数组，我们可以说是这样的：

dataArray = [humanName: abc, humanAge: 25, humanWeight:.....etc]

使用它我正在创建一个网站，我可以在其中显示信息，例如他的体重随时间变化的图表或一些文本，例如他的姓名和年龄作为字符串。

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 获取，一旦将其放入变量并将其传输到不同的文件而不是单独执行？

【问题讨论】：

标签： javascript jquery node.js api fetch

【解决方案1】：

在 JS 中，顶级声明的变量是全局的，这既是福也是祸。你可以利用它来发挥你的优势。声明一个全局变量并将 API 调用的响应保存在所述变量中。然后你可以在你所有的 JS 文件中访问它

【讨论】：

如果我有多个 JS 文件，我会在哪里声明全局变量？
为方便起见，在您导入到 html 的第一个文件中声明它
或者只是让每个页面检查window.variableNameHere 并继续。现在，如果您希望这是一个反应性过程，即只要变量更新，其他部分都会更新，这是一些棘手的事情
哦，所以我只是在我的第一个 JS 文件中调用 api，例如：var thisDataArray = getLatestData() 然后我可以在其他文件中访问 thisDataArray
由于 api 调用的异步性质，以这种方式设置将不起作用。将其声明在顶部，但将其设置在 fetch 响应中。 Jhecht 方法也有效

【解决方案2】：

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

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

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

【讨论】：