使用 SAPUI5 读取 REST 服务答案

【问题标题】：Reading REST Service with SAPUI5使用 SAPUI5 读取 REST 服务
【发布时间】：2013-12-04 16:08:21
【问题描述】：

我正在尝试使用 SAPUI5 访问 REST 服务。我在 jQuery 的帮助下发送了一个 GET 请求，并期待一个 JSON 响应，但我得到的只是一个空的 JSON 对象。但是，使用 RESTClient 测试的 REST 服务给了我正确的响应。

这是我目前使用的代码：

查看

sap.ui.jsview("sapui5_test.SAPUI5_Test", { 

    getControllerName : function() {
        return "sapui5_test.SAPUI5_Test";
    },

    createContent : function(oController) {

    var text = new sap.ui.commons.TextField( {  
        width : "100%"  
    }); 

// arrange controls on the page with a matrix layout  
    var ml = new sap.ui.commons.layout.MatrixLayout( {  
        columns : 2,  
        layoutFixed : true,  
        width : "500px"  
    }); 

    ml.addRow(new sap.ui.commons.layout.MatrixLayoutRow( {  
        cells : [  
            new sap.ui.commons.layout.MatrixLayoutCell( {  
                content : [ text ]  
            })]  
    }));

    var model = oController.initTodoModel();

    text.setValue(model.getJSON());
    return [ ml ];
    }   



});

控制器

sap.ui.controller("sapui5_test.SAPUI5_Test", {

initTodoModel : function() {  
            var oModel = new sap.ui.model.json.JSONModel();
            var aData = jQuery.ajax({
                type : "GET",
                contentType : "application/json",
                url : "http://sapm04.ibsolution.local:50000/demo.sap.com~d337_resttest_web/rest/todo/init/",
                dataType : "json",
                success : function(data,textStatus, jqXHR) {
                    oModel.setData({modelData : data}); 
                    alert("success to post");
                }

            });

            return oModel;  
        }
}

});

index.html

<!DOCTYPE HTML>
<html>
<head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

      <script src="resources/sap-ui-core.js"
            id="sap-ui-bootstrap"
              data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.ui.ux3"
            data-sap-ui-theme="sap_goldreflection">
    </script>
    <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

    <script>
            sap.ui.localResources("sapui5_test");
            var view = sap.ui.view({id:"idSAPUI5_Test1", viewName:"sapui5_test.SAPUI5_Test", type:sap.ui.core.mvc.ViewType.JS});
            view.placeAt("content");
    </script>

</head>
<body class="sapUiBody" role="application">
    <div id="content"></div>
</body>

如前所述，当我在 RESTClient 中运行与 jQuery 中相同的 URL 时，我得到一个填充的 JSON 对象，但是 UI5 页面中的结果是一个空的 JSON 对象 {}。

我也尝试了以下解决方案：

var oModel = new sap.ui.model.json.JSONModel("http://sapm04.ibsolution.local:50000/demo.sap.com~d337_resttest_web/rest/todo/init/");

但这没有帮助。

【问题讨论】：

标签： jquery json rest sapui5

【解决方案1】：

嗯，原因很明显。控制器中的return 语句在json 对象填充数据之前完成执行。这是因为 $.ajax 调用是异步的，这意味着 JavaScript 会调用后端服务器并且不会等到发送答案，而是 JavaScript 会在 oModel 之前直接进入下一条指令 return oModel充满了数据。如果您向后端发出同步请求，您的问题将得到解决，您可以这样做：

 sap.ui.controller("sapui5_test.SAPUI5_Test", {

 initTodoModel : function() {  
        var oModel = new sap.ui.model.json.JSONModel();
        var aData = jQuery.ajax({
            type : "GET",
            contentType : "application/json",
            url : "http://sapm04.ibsolution.local:50000/demo.sap.com~d337_resttest_web/rest/todo/init/",
            dataType : "json",
            async: false, 
            success : function(data,textStatus, jqXHR) {
                oModel.setData({modelData : data}); 
                alert("success to post");
            }

        });

        return oModel;  
    }
  }

 });

但是，不推荐使用同步调用，因为它会在请求完成之前暂停应用程序。

为什么不应该使用同步请求？

想象一下，在调用结束之前暂停您的应用程序。对于少数请求来说，这可能不是什么大问题，但如果您有一个大型应用程序需要与后端数据提供者进行大量交互，那么这将是一个主要问题。

设计改进建议：

如果由我决定，我会设计应用程序，以便能够注册回调函数到 ajax 请求中。因此应用程序将遵循设计模式之类的责任链，当数据准备好时，依赖于它的模块将被执行，并且不会停止应用程序的其他模块。

简单来说，通过在成功函数内而不是在$.ajax 调用之外调用函数来对数据执行任何您想做的事情。

【讨论】：

我认为你是对的，因为如果我刷新页面一两次，数据似乎就在那里。谢谢你。我仍然想知道为什么 SAPUI5 构造 var oModel = new sap.ui.model.json.JSONModel("sapm04.ibsolution.local:50000/demo.sap.com~d337_resttest_web/…); 根本不起作用。
开始另一个关于这个问题的线程，提供更多信息。我在 jsfiddle 中演示会很完美，我会尽力提供帮助。