如何等待并使用来自 XMLHttpRequest 的数据？

Question

NOAA 提供来自各种气候数据的公共数据集的数据。我想做的，在纯 JavaScript 解决方案中，从 NOAA（纯文本位置文件）下载气象站和气象站元数据文件，并使用我想要的数据（降水量、每日最高温度）解析气象站的元数据文件、最低温度和平均温度。根据这些数据，我可以从站点下载天气数据，并使用 Plotly 绘制它。

我使用 XMLHttpRequest 尝试了许多不同的方法，但总是以相同的方式结束。这是我的典型努力：

<script>
    xhttpStation.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       stationData = xhttpStation.responseText;
    };

    xhttpStation.open("GET", "https://www.ncei.noaa.gov/pub/data/ghcn/daily/ghcnd-stations.txt", false);
    xhttpStation.send();
</script>

我找不到从

.responseText

返回到函数外部并使用数据制作电台 ID 的下拉选择列表的方法。我必须遗漏一些东西，因为 XHR 调用的异步性质允许我的代码继续运行，而无需等待获取数据。

Answer 1

在现代浏览器中，将

fetch()

与

async

功能结合使用会更容易。以下代码片段使用 IIFE（立即调用函数表达式）在页面上显示文本文件的前 400 个字符和后 400 个字符：

(async ()=>{
 const txt=await fetch("https://www.ncei.noaa.gov/pub/data/ghcn/daily/ghcnd-stations.txt").then(r=>r.text());
 document.getElementById("result").innerHTML=txt.slice(0,400)+"\n ... \n"+txt.slice(-400);

// Insert the code for building
// your select box here.


})()

#result {}

<pre id="result">Please wait ...</pre>

由于您正在下载相当大的文件，因此您必须等待几秒钟才能显示结果，请不要感到惊讶。但无论如何，由于 main 函数的异步特性，您的页面在此期间不会被阻塞。