如何将 xhttp 下载的数据获取到 Javascript 中的字符串变量并在我的应用程序中使用它

Question

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

我用 xhttp 尝试了很多不同的方法，但我总是在同一个地方结束。这是我的典型努力：

<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 的下拉选择列表。我必须遗漏一些东西，因为 xhttp 调用的异步性质允许我的代码继续运行而无需等待获取数据。

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);
})()

#result {}

<pre id="result"></pre>