在从 API 获取数据之前在 Javascript 中使用变量答案

【问题标题】：Use variables in Javascript before the data is fetched from an API在从 API 获取数据之前在 Javascript 中使用变量
【发布时间】：2021-10-11 15:39:57
【问题描述】：

有一段 javascript 代码（来自令人惊叹的 CodingTrain 系列！！）：

我的问题如下：

我们在第 28 行将数据对象传递给 fetch-Post 请求。在第 17 行首先声明了两个变量 latand lon，但未初始化。然后在第 20 行使用它们构建数据对象最终在第 28 行传递给 fetch 函数。

我不明白这两个变量如何保存代码中已经存在的地理位置值。因为我们仅在下面的第 35-40 行中获得了地理位置。可能这与 async 和 await 逻辑的工作方式有关，但我不确定。

01: <!DOCTYPE html>
02: <html lang="en">
03:   <head>
04:     <meta charset="UTF-8" />
05:     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
06:     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
07:     <title>Document</title>
08:   </head>
09:   <body>
10:     <h1>Data Selfie App</h1>
11:     <p>
12:       latitude: <span id="latitude"></span>&deg;<br />
13:       longitude: <span id="longitude"></span>&deg;
14:     </p>
15:     <button id="submit">submit</button>
16:     <script>
17:       let lat, lon;
18:       const button = document.getElementById('submit');
19:       button.addEventListener('click', async event => {
20:         const data = { lat, lon };
21:         const options = {
22:           method: 'POST',
23:           headers: {
24:             'Content-Type': 'application/json'
25:           },
26:           body: JSON.stringify(data)
27:         };
28:         const response = await fetch('/api', options);
29:         const json = await response.json();
30:         console.log(json);
31:       });
32: 
33:       if ('geolocation' in navigator) {
34:         console.log('geolocation available');
35:         navigator.geolocation.getCurrentPosition(async position => {
36:           lat = position.coords.latitude;
37:           lon = position.coords.longitude;
38:           document.getElementById('latitude').textContent = lat;
39:           document.getElementById('longitude').textContent = lon;
40:         });
41:       } else {
42:         console.log('geolocation not available');
43:       }
44:     </script>
45:   </body>
46: </html>

github repo 的链接是这样的：https://github.com/CodingTrain/Intro-to-Data-APIs-JS

【问题讨论】：

在您单击按钮之前，第 20 行不会运行。我们假设 API 会在用户点击之前返回数据并分配变量。

标签： javascript html node.js async-await fetch

【解决方案1】：

19到31之间的代码：

button.addEventListener('click', async event => {
    // ...
});

... 将回调附加到事件。该回调将不会执行现在。它是将在将来执行的代码，即当用户单击按钮时。

您可以移动这段代码到第 44 行，它不会改变代码逻辑。

你可以在这个简化的代码中看到原理——一个按钮（点击它）：

let button = document.querySelector("button");
let i = 0;

button.addEventListener("click", function () {
    console.log("i =", i);
});

i = 10; // This executes first!

&lt;button&gt;Click me&lt;/button&gt;

【讨论】：

非常感谢！我知道这是一个简单的问题。我来自一个完全不同的背景，所以有时我在掌握 JavaScript 时会遇到一些困难。所以我真的很感激:)！

【解决方案2】：

他们的教程没有解释变量和变量作用域吗？

基本上当你有这样的代码时：

let someVar;
function a() {}
const someFunc = () => someVar;
// ...

因为a（和someFunc）在他们可以访问someVar时被定义，所以他们现在保持对该变量的永久访问。

在您的情况下，let lat, lon; 下面的所有函数声明都可以随时读取和写入这些变量。 getCurrentPosition最终会将值写入这些变量，然后'click' 侦听器将使用这些值。如果你足够快地按下按钮，在getCurrentPosition 完成之前（或者如果navigator 不可用），lat/lon 仍然是undefined。 p>

另一个例子：

const funcs = [];
for (let i = 0; i < 3; i++) {
    funcs.push(() => i);
}
console.log(funcs.map(f => f()));

在循环中，我创建了 3 个函数（i 是 0、1，然后是 2）。后来我打电话给他们。即使i 的作用域（for-loop 的主体）已经结束并且变量“死”了，函数仍然可以访问它们，因为它们在变量仍然存在并且可以访问时被声明。另请注意，每个函数如何仅访问它们被声明时处于活动状态的i 变量，而不是早期/后期迭代中的i。

【讨论】：

非常感谢！我想我每次都会多一点:)