为什么在 JavaScript 中调用异步函数时我的 HTML 值没有改变？

Question

我有以下函数用于从 API 获取数据并通过其 ID 设置 HTML 元素的文本：

var api_url = "https://api.wheretheiss.at/v1/satellites/25544";

var coordinates = {
    latitude : 0,
    longitude : 0
}

async function getISS() {
    const response = await fetch(api_url);
    const data = await response.json();
    const {latitude, longitude} = data;
    var spaceStationCoordinates = new coordinates({
        latitude: latitude,
        longitude: longitude
    });
    return spaceStationCoordinates;
}

async function setText(id,newvalue) {
    var s= document.getElementById(id);
    s.innerHTML = newvalue;
  } 

然后我使用这些函数尝试在我的 HTML 中插入纬度和经度值：

    <main>
      <h1>Where is the ISS?</h1>
      <p>Latitude: <span id="lat" type = text>""</span></p> <br>
      <p>Longitude: <span id="lon" type = text>""</span></p>
      <script src="js/script.js" type="text/javascript">
      var longitude = 0;
      var latitude = 0;
      latitude = getISS().latitude;
      longitude = getISS().longitude;
      setText(lat, latitude);
      setText(lon, longitude);
      </script> 
    </main> 

然而，这根本没有任何作用。 任何帮助表示赞赏。

Answer 1

很确定您需要await异步函数的响应

尝试：

coordinates = await getISS();
setText(lat, coordinates.latitude);
setText(lon, coordinates.longitude);

Answer 2

html 中的脚本标签有一个来源： <script src="js/script.js" type="text/javascript">

所以浏览器会注意到这一点，并运行代码。
然后它假定脚本标签结束。 （它运行源代码中的所有代码，对吗？）
因此，当它找到“意外”字符 (v) 时，它会被解释为文本。

    <main>
      <h1>Where is the ISS?</h1>
      <p>Latitude: <span id="lat" type = text>""</span></p> <br>
      <p>Longitude: <span id="lon" type = text>""</span></p>
      <script src="js/script.js" type="text/javascript">
        <!-- This is just some text, the script tag should be already finished -->
        var longitude = 0;
        var latitude = 0;
        latitude = getISS().latitude;
        longitude = getISS().longitude;
        setText(lat, latitude);
        setText(lon, longitude);
        </script> 
    </main>

您需要做的是将所有内联代码放入文件中，或者将所有文件代码内联。

像这样：

var api_url = "https://api.wheretheiss.at/v1/satellites/25544";

var coordinates = {
    latitude : 0,
    longitude : 0
}

async function getISS() {
    const response = await fetch(api_url);
    const data = await response.json();
    const {latitude, longitude} = data;
    var spaceStationCoordinates = new coordinates({
        latitude: latitude,
        longitude: longitude
    });
    return spaceStationCoordinates;
}

async function setText(id,newvalue) {
    var s= document.getElementById(id);
    s.innerHTML = newvalue;
}

// inserted code
var longitude = 0;
var latitude = 0;
latitude = getISS().latitude;
longitude = getISS().longitude;
setText(lat, latitude);
setText(lon, longitude);

你可以看到浏览器认为它是文本：

Answer 3

getISS是一个异步函数，您可以将其称为异步方式（ await keyword/ Promise style ）。

承诺风格：

<main>
  <h1>Where is the ISS?</h1>
  <p>Latitude: <span id="lat" type=text>""</span></p> <br>
  <p>Longitude: <span id="lon" type=text>""</span></p>
  <script src="js/script.js" type="text/javascript">
    getISS().then(coordinates => {
      setText('lat', coordinates.latitude);
      setText('lon', coordinates.longitude);
    });
  </script>
</main>

async/await风格，使用 IIFE

<main>
  <h1>Where is the ISS?</h1>
  <p>Latitude: <span id="lat" type=text>""</span></p> <br>
  <p>Longitude: <span id="lon" type=text>""</span></p>
  <script src="js/script.js" type="text/javascript">
    (async () => {
      const coordinates = await getISS(); // wait here
      setText('lat', coordinates.latitude);
      setText('lon', coordinates.longitude);
    })();
  </script>
</main>

Answer 4

^{这个错误是单独的，所以我提交单独的答案。}

---

new 关键字需要一个构造函数。
将它与对象一起使用会引发错误： new {exampleProperty: 7}(23)

    var spaceStationCoordinates = new coordinates({  // ERROR

所以coordinates应该是一个构造函数或类：

var coordinates = {
    latitude : 0,
    longitude : 0
}

// INTO:
class coordinates {
    constructor (lat, lon) {
        this.latitude = lat;
        this.longitude = lon;
    }
}

// OR
function coordinates (lat, lon) {
    this.latitude = lat;
    this.longitude = lon;
}