从WMS图层获取时间数组填充OpenLayers下拉菜单遇阻

嗨，我太懂你的困扰了——这绝对是JavaScript异步编程的经典入门坑，和你是不是新手没关系，刚摸JS的开发者十有八九都会碰到！

问题根源 #

你的代码里的fetch是异步操作，它不会阻塞后续代码的执行：当你调用fetch后，JS会继续往下跑console.log(times)和填充下拉菜单的代码，这时候times还没被赋值呢！只有等WMS的Capabilities请求完成后，then里的回调才会执行，给times赋值，但这时候外面的代码早就跑完了。

另外还要提个小细节：你代码里的document.getELementById拼写错了，应该是document.getElementById（注意L是小写），这个也可能影响后续功能哦。

解决方案1：把后续操作移到then回调里 #

最简单的办法就是把填充下拉菜单的逻辑直接放到第二个then里面，这样就能保证在times有值之后再执行：

var url = 'working_WMS_url';
var GetCaps = new ol.format.WMSCapabilities();
fetch(url).then(function(response) {
  return response.text();
}).then(function(text) {
  var result = GetCaps.read(text);
  var times = result.Capability.LayerLayer[0].Dimension;
  console.log(times); // 这里打印肯定有值了
  
  // 填充下拉菜单的代码移到这里
  var time_list = document.getElementById("time_list");
  for(var i = 0; i < times.length; i++) {
    var opt = times[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    time_list.appendChild(el);
  }
});

解决方案2：用async/await让代码更易读 #

如果你觉得嵌套的then看起来有点乱，可以用ES6的async/await语法，让异步代码看起来像同步的：

var url = 'working_WMS_url';
var GetCaps = new ol.format.WMSCapabilities();

// 定义一个异步函数
async function loadTimeOptions() {
  try {
    // 等待fetch请求完成
    const response = await fetch(url);
    // 等待返回的文本数据
    const text = await response.text();
    // 解析WMS Capabilities
    const result = GetCaps.read(text);
    const times = result.Capability.LayerLayer[0].Dimension;
    
    console.log(times);
    // 填充下拉菜单
    var time_list = document.getElementById("time_list");
    for(var i = 0; i < times.length; i++) {
      var opt = times[i];
      var el = document.createElement("option");
      el.textContent = opt;
      el.value = opt;
      time_list.appendChild(el);
    }
  } catch (error) {
    // 捕获请求或解析过程中的错误
    console.error('加载时间维度失败:', error);
  }
}

// 调用这个异步函数
loadTimeOptions();

这样写逻辑更线性，可读性更强，还能通过try/catch处理可能的请求错误，比嵌套then更优雅。

内容的提问来源于stack exchange，提问作者JackLidge