javascript - 在SAPUI5中完成异步功能的值(value)获取

This question already has answers here:

Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference
                                
                                    （6个答案）
                                
                        
                                5个月前关闭。
            
                    
变量datelist应该是包含许多项的数组。
项目将被一一推送到oModel.attachRequestComplete()函数中的列表中。

以下示例中的console.log(datelist)列出了所有必需项（10个项）。
但是，datelist.length属性是0。

数组如何包含10个元素，但其长度为0？

预期成绩：


datelist应包含所有项目
datelist.length应该是> 0

var datelist = [];
var oModel = new sap.ui.model.json.JSONModel();

oModel.attachRequestCompleted(function() {
  var oFeiertageBerlin = oModel.getData().BE;
  for (var prop in oFeiertageBerlin) {
    datelist.push(oFeiertageBerlin[prop].datum);
  }
});


console.log(datelist);
var jDatum = new Date();
var jLink = "https://feiertage-api.de/api/?jahr=" + jDatum.getFullYear();
oModel.loadData(jLink);

// Why is datelist.length == 0 here?
console.log(datelist, datelist.length);

最佳答案

oModel.loadData将异步请求数据。
请求完成后，将调用传递给attachRequestCompleted的回调（在数据可用之前，执行不会在loadData()处阻塞）

当您的console.log(datelist, datelist.length);行运行时，datelist仍将是一个空数组。
之所以可以在浏览器控制台中看到数组中的项目，是因为在检查请求时，该请求已经完成。
您可以在浏览器控制台中尝试以下操作：

var arr = [];
console.log(arr, arr.length); // [], 0
arr.push(1); arr.push(2); arr.push(3);
// console.log(arr, arr.length); // [1,2,3], 3

第一个日志将输出数组，当您检查它时，项目将在此处-当您访问.length时，它们还不存在。

要解决此问题，您可以将datelist保留在请求完成的处理程序中：

var oModel = new sap.ui.model.json.JSONModel();

oModel.attachRequestCompleted(function() {
  var oFeiertageBerlin = oModel.getData().BE;
  var datelist = [];
  for (var prop in oFeiertageBerlin) {
    datelist.push(oFeiertageBerlin[prop].datum);
  }

  console.log(datelist, datelist.length);
  // do something with the datelist here
});


var jDatum = new Date();
var jLink = "https://feiertage-api.de/api/?jahr=" + jDatum.getFullYear();
oModel.loadData(jLink);

使用sapui，您可以将数组作为json模型返回，然后可以绑定到视图中：

function loadHolidays() {
  var result = new sap.ui.model.json.JSONModel({datelist: []});
  var oModel = new sap.ui.model.json.JSONModel();
  oModel.attachRequestCompleted(function() {
    var oFeiertageBerlin = oModel.getData().BE;
    var datelist = [];
    for (var prop in oFeiertageBerlin) {
      datelist.push(oFeiertageBerlin[prop].datum);
    }
    result.setData({datelist: datelist});
  });

  var jDatum = new Date();
  var jLink = "https://feiertage-api.de/api/?jahr=" + jDatum.getFullYear();
  oModel.loadData(jLink);

  return result;
}

var model = loadHolidays();
// attach model to view
// e.g. sap.ui.getCore().setModel(model);

在表格中显示日期的Plunker示例：Plunker Holiday Example