升级SAPUI5后从Fiori启动页进入时JSONModel数据加载异常求助

问题背景 #

一款稳定运行两年的SAP Fiori应用，将SAPUI5从1.56.x版本升级至1.101.x后，出现特定场景报错：从Fiori启动页导航进入应用时触发Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'indexOf')，直接刷新应用则几乎无异常。

报错触发代码如下：

onAfterRendering: function (oEvent) {
  var sButtonId = this.getModel("misc").getProperty("/ButtonId");
  // 此处因sButtonId未定义报错
  if (sButtonId.indexOf("Demand") > -1) { 
    //...
  }
},

报错原因分析 #

经调试和网络请求分析，问题根源在于JSONModel的异步加载时机差异：

• 直接刷新应用时，JSON模型文件在onAfterRendering执行前已加载完成，能正常获取/ButtonId的值；
• 从Fiori启动页导航进入时，模型请求已发起但未返回，UI5内部JSONModel.prototype._getObject方法返回null，导致sButtonId为undefined，调用indexOf时触发类型错误。
  由于需兼容ECMAScript 5（ES5），无法使用async/await语法处理异步逻辑。

解决方案 #

方案1：监听模型加载完成事件（推荐） #

通过监听JSONModel的dataLoaded事件，确保仅在模型数据加载完成后执行依赖逻辑，兼容ES5语法：

onInit: function() {
  var oMiscModel = this.getModel("misc");
  // 一次性监听模型加载完成事件
  oMiscModel.attachEventOnce("dataLoaded", function() {
    this._bMiscModelReady = true;
    // 如果视图已渲染，直接执行目标逻辑
    if (this.getView().getRendered()) {
      this._processButtonIdLogic();
    }
  }, this);
},

onAfterRendering: function() {
  // 模型已加载则直接执行逻辑，否则等待事件触发
  if (this._bMiscModelReady) {
    this._processButtonIdLogic();
  }
},

// 封装依赖模型数据的逻辑
_processButtonIdLogic: function() {
  var sButtonId = this.getModel("misc").getProperty("/ButtonId");
  if (sButtonId && sButtonId.indexOf("Demand") > -1) {
    // 原业务逻辑代码
  }
}

方案2：增加防御性空值判断 #

在调用indexOf前先检查sButtonId是否存在，避免报错（仅解决报错问题，逻辑需等待模型加载完成后才会执行）：

onAfterRendering: function (oEvent) {
  var sButtonId = this.getModel("misc").getProperty("/ButtonId");
  // 先判断变量是否存在，再执行后续逻辑
  if (sButtonId && sButtonId.indexOf("Demand") > -1) { 
    //...
  }
},

方案3：核对manifest.json预加载配置 #

确认模型在manifest.json中的预加载配置正确，确保UI5按预期触发预加载：

"sap.ui5": {
  "models": {
    "misc": {
      "type": "sap.ui.model.json.JSONModel",
      "uri": "your/path/misc.json",
      "preload": true
    }
  }
}

注：UI5版本升级后预加载逻辑可能有调整，此方案需结合前两种方案使用，确保导航场景下的加载时机覆盖。

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