SAPUI5 JSON REST API非 oData模拟服务器

如何解决SAPUI5 JSON REST API非 oData模拟服务器

如何将模拟服务器用于 JSON REST API 而不是用于 oData 服务？ 我想模拟 http://localhost:8080/api/v1/configs 以获取所有配置的 JSON 列表，即使我没有后端连接并且我在模拟模式下运行应用程序。

以下不起作用，它还返回真实数据而不是模拟数据。

mockserver.js：

sap.ui.define([
  "sap/ui/core/util/MockServer","sap/base/util/UriParameters"
],function (MockServer,UriParameters) {
  "use strict";

  var oTokenRequest = {
    method: "GET",path: new RegExp("/actuator/info"),response: function (oXhr,sNodeId) {
      jQuery.sap.log.debug("Incoming request for X-CSRF Token");
      oXhr.respondJSON(200,{
        "X-Csrf-Token": "myFaketoken"
      },{});
    }
  };

  var oMockServer;

  return {

    init: function () {

      var oUriParameters = new UriParameters(window.location.href);

      // configure mock server with a delay
      MockServer.config({
        autoRespond: true,autoRespondAfter: oUriParameters.get("serverDelay") || 500
      });

      var oAllConfigurations = {
        method: "GET",path: "/configs",// or "new RegExp(".*?")" for everything after v1/?
        response: function (oXhr,sUrlParams) {
          oXhr.respondJSON(200,{},JSON.stringify({
            "uuid": "50df30x9-762b-341c-9881-7315l242b6c5","name": "Config1","description": "Mapping for component1","fiLeversion": 3,"createdAt": 1581517043000,"updatedAt": 1589039157000
          },{
            "uuid": "4f68da04-28a2-4a4e-947k-6d7be70cr03k","name": "MOCKSERVER-Config2","description": "Mapping for component2","fiLeversion": 12,"createdAt": 1553685823000,"updatedAt": 1589363607000
          },{
            "uuid": "6g6chg1-23a2-4a3o-332a-2a6be08ca02f","name": "Config3","description": "Mapping for component3","fiLeversion": 1,"createdAt": 1596119686000,"updatedAt": 1596119686000
          }));
        }
      };

      var aRequests = [oTokenRequest];
      aRequests = aRequests.concat(oAllConfigurations);

      // create
      this.oMockServer = new MockServer({
        rootUri: "http://localhost:8080/api/v1",requests: [oAllConfigurations]
      });


      // start
      this.oMockServer.start();
    }
  };

});

data-sap-ui-oninit 在 mockServer.html 导致 initMockServer.js

initMockServer.js：

sap.ui.define([
    "../localService/mockserver"
],function (mockserver) {
    "use strict";

    // initialize the mock server
    mockserver.init();

    // initialize the embedded component on the HTML page
    sap.ui.require(["sap/ui/core/ComponentSupport"]);
});

Main.controller.js：

//...

 _getConfigList: function () {
      var oModelConfigList = new JSONModel();
      this.request = new BaseRequests();
        return fetch("http://localhost:8080/api/v1/configs")
          .then((response) => {
            if (response.ok) {
              return response.json();
            } else {
              Messagetoast.show(response.statusText);
              return null;
            }
          }).then(json => {
          if (json) {
            oModelConfigList.setData(json);
            this.getView().setModel(oModelConfigList,"ConfigList");
          }
        });
      },//...

解决方法

UI5-Mockserver 仅用于 UI5 V2-Model 实现。因此，您需要构建自己的。

尽可能简单；我建议将所有内容都打包在一个委托中，并在运行时使用全局标志来切换模拟/真实请求。

//
// your delegate
//
sap.ui.define([
    "sap/ui/base/Object"
],function (BaseObject) {
    "use strict";

    const mockData = {
        "uuid": "50df30x9-762b-341c-9881-7315l242b6c5","name": "Config1","description": "Mapping for component1","fileVersion": 3,"createdAt": 1581517043000,"updatedAt": 1589039157000
      },{
        "uuid": "4f68da04-28a2-4a4e-947k-6d7be70cr03k","name": "MOCKSERVER-Config2","description": "Mapping for component2","fileVersion": 12,"createdAt": 1553685823000,"updatedAt": 1589363607000
      },{
        "uuid": "6g6chg1-23a2-4a3o-332a-2a6be08ca02f","name": "Config3","description": "Mapping for component3","fileVersion": 1,"createdAt": 1596119686000,"updatedAt": 1596119686000
      }

    return BaseObject.extend("my.namespace.delegate.config",{

        read: function(){
           if(!window.MY_NAME_SPACE_MOCK){
            return fetch("api/v1/configs")
            .then((response) => {
              if (response.ok) {
                return response.json();
              } else {
                //MessageToast.show(response.statusText);
                return null;
              }
            })
           }else{
            return new Promise((resolve,reject) => {
                let wait = setTimeout(() => {
                  clearTimout(wait);
                  resolve(mockData);
                },2000)
              })
           }
        },});
});

// usage
sap.ui.define([
    "my/namespace/delegate/config"
],function (Config) {
    onInit: function() {
            this._config = new Config();
            this._config.read()
            .then((data)=>{
              console.log("data can be mock or real depending on MY_NAME_SPACE_MOCK")})
    },})

//
// switch on/off mocking anywhere 
//
window.MY_NAME_SPACE_MOCK = true;
delete window.MY_NAME_SPACE_MOCK

仅供参考：domain("localhost") 不是普通 AJAX 请求的一部分。一旦部署；这将不再起作用