脚本内的异步等待 - 使用 fetch 的 API 调用不返回结果

Question

我正在尝试使用客户端的 JavaScript 脚本从 API 检索天气数据。代码如下所示：

  <script>
    async function fetchWeatherData(){
      var url = "http://www.7timer.info/bin/api.pl?lon=-3.57&lat=40.49&product=astro&output=json";
      var weather_data = await fetch(url);
      var weather_json = await weather_data.json();
      return weather_json.dataseries[0].temp2m;
    }
    document.write(await fetchWeatherData());
  </script>

不幸的是，这段代码没有按我的预期工作。非常相似的 Node.JS/Express 在服务器端工作得很好：

export async function getTemperature(iata){
    let latLong = latLongAirports.find(el => el.iata === iata);
    var url = "http://www.7timer.info/bin/api.pl?lon=" + latLong.long + "&lat=" + latLong.lat + "&product=astro&output=json"
    const response = await fetch(url);
    const jsonTemperature = await response.json();
    return jsonTemperature.dataseries[0].temp2m;
}

我在客户端/服务器端代码之间缺少或不理解什么？

Answer 1

问题是您可以\xc2\xb4t在普通脚本标签中使用“顶级异步”。您需要将脚本标记声明为type="module". 然后它就会像你期望的那样工作。

\n

\r\n

\r\n

      <script type="module">\n        async function fetchWeatherData(){\n          var url = "http://www.7timer.info/bin/api.pl?lon=-3.57&lat=40.49&product=astro&output=json";\n          var weather_data = await fetch(url);\n          var weather_json = await weather_data.json();\n          return weather_json.dataseries[0].temp2m;\n        }\n        document.write(await fetchWeatherData());\n      </script>

\r\n

\r\n

\r\n

\n