javascript - SAPUI5 - 存在异步函数时的路由问题

Question

我有一个用 JavaScript 编写的 SAPUI5 Fiori Web 应用程序。该应用程序包含多个 View ，我有一个导航栏可以在 View 之间导航。 View 通过路由机制加载到 NavContainer 元素中(请参阅: Nested Navigation in SAPUI5 )。

我的问题:当我在 Google Chrome 中启动应用程序时，一切正常。当我在 IE11 或 Edge 中启动应用程序时，路由不起作用。没有错误消息，但当我想要导航时 View 不会改变。

现在我开始分析代码，发现当我的 Controller 中有任何 async 函数并且使用 await 时，路由不会工作。当我从 Controller 中删除所有异步函数和等待时，路由工作正常。

我已经尝试从我的 Controller 中删除“use strict”，并且还在我的index.html中加载了polyfill文件，但这也没有解决我的问题。

有谁知道我该如何解决这个问题？因为我需要在 Controller 中调用异步函数。

感谢任何帮助，谢谢。

我的 Controller 代码如下所示:

ProductSelection.controller.js

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel",
    "sap/ui/model/Filter",
    "sap/ui/model/FilterOperator",
    "sap/ui/model/resource/ResourceModel"
], function (Controller, JSONModel, Filter, FilterOperator) {
    "use strict";

    return Controller.extend("CS_MOE.Demo.controller.ProductSelection", {

        onInit: function () {

            this.getView().addEventDelegate({
                onBeforeShow: this.onBeforeShow
            }, this);
        },

        onBeforeShow: function (e) {

        },

        getProducts: async function (criteria) {
            var showMore = this.lastMatnr !== "";
            this.setTableProductBusy(true, showMore);

            var oProductFilter = new Filter("Suche", FilterOperator.Contains, criteria);
            var oIndexFilter = new Filter("Last_Matnr", FilterOperator.EQ, this.lastMatnr);
            var oFilters = [oProductFilter, oIndexFilter];
            var result = await this.execRequest(oFilters, "/ARTICLESSet");
        },

        //function to trigger GET-Request for given filters and "target"-EntitySet - promise is used to fulfill the async/await functions
        execRequest: async function (oFilters, entitySet) {

            var oArtikelODataService = this.getOwnerComponent().getModel("productService");
            return new Promise(function (resolve, reject) {
                oArtikelODataService.read(entitySet, {
                    filters: oFilters,
                    async: true,
                    success: function (response) {
                        var oResponse = response.results;
                        resolve(oResponse);
                    },
                    error: function (oError) {
                        console.log(oError);
                    }
                });
            });
        }

    });

});

Answer 1

在 async/await 之前曾经有一段时间，也可以执行异步操作。

您可以执行 this.execRequest(oFilters, "/ARTICLESSet").then(...)，而不是 await this.execRequest(oFilters, "/ARTICLESSet").

或者简单地执行return this.execRequest(oFilters, "/ARTICLESSet")，稍后当您调用getProducts时，您可以执行this.getProducts(sCriteria) .then(...);

如果你确实想使用 async/await，你必须设置 Babel，它会转译你的代码，以便部署时可以在 IE11 中运行。