Return 来自获取的 WMS GetCapabilities 请求的数组

Question

我正在尝试 return 来自 WMS 层的一组时间值我必须在 Openlayers 中填充一个下拉菜单。我已经能够在函数内的层中获取时间值列表（并将此输出打印到函数中的控制台），但无法从函数中获取此数组。当前代码如下：

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;
      return times;
});
console.log(times);

// Section below links and populates dropdown menu
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);
}

为了确认下拉菜单是否正常工作，我使用一组手动定义的时间进行了测试。我只是想不通为什么列表 "times" 不是从函数中 return 编辑的。

为了清楚起见，我对 javascript 比较陌生，但一般不会编码，所以如果有一个非常简单的解决方案，我深表歉意。我花了最后一个小时查看 Whosebug 问题，但找不到能准确回答这个问题的问题。

Answer 1

fetch 异步操作，因此所有依赖于从 url 读取的文本的处理都应该在 fetch 的最后 then 子句中。

另一种方法（并非所有浏览器都支持）是将调用函数声明为异步并使用 await 语句

async function myFunction(url, elenentId) {

  var GetCaps = new ol.format.WMSCapabilities();
  var times = await fetch(url).then(function(response) {
      return response.text();
    }).then(function(text) {
      var result = GetCaps.read(text);
      var times = result.Capability.LayerLayer[0].Dimension;
      return times;
  });
  console.log(times);

  // Section below links and populates dropdown menu
  var time_list = document.getELementById(elenentId);

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

}

myFunction('working_WMS_url', 'time_list');

Return 来自获取的 WMS GetCapabilities 请求的数组

Return array from fetched WMS GetCapabilities request

javascript

arrays

wms

openlayers