Javascript 如何在 sapui5 / openui5 中等待 JSONModel.loadData() 请求

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/34902699/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 17:01:25  来源:igfitidea点击:

How to wait for a JSONModel.loadData() request in sapui5 / openui5

javascriptasynchronoussapui5

提问by Benvorth

In sapUI5/openUI5 I have a JSONModel I populate by a file from server:

在 sapUI5/openUI5 我有一个 JSONModel 我用来自服务器的文件填充:

var oModel = new JSONModel();
oModel.loadData("http://127.0.0.1/data/config.json");
console.log(JSON.stringify(oModel.getData()));

The console logs an empty oModel since the request is asynchronous.

由于请求是异步的,因此控制台会记录一个空的 oModel。

How to make it synchronous so console.log()is called after the data was loaded?

如何使其同步以便console.log()在加载数据后调用?

回答by schnoedel

Using synchronous ajax requests is not recommended as it blocks the UI and will probably result in a warning in the console.

不推荐使用同步 ajax 请求,因为它会阻塞 UI,并且可能会在控制台中导致警告。

You can attach to the Model.requestCompletedevent to access the asynchronously loaded data:

您可以附加到Model.requestCompleted事件以访问异步加载的数据:

oModel.attachRequestCompleted(function() {
        console.log(oModel.getData());
    });

回答by dotchuZ

The keyword you are looking for is "Deferred"-object --> it enables you to wait for an AJAX request in SAPUI5.

您正在寻找的关键字是 "Deferred"-object --> 它使您能够在 SAPUI5 中等待 AJAX 请求。

Check this for SAPUI5 context: SAPUI5 Wait for an Deferred-Object // wait for .done() function

检查 SAPUI5 上下文:SAPUI5 Wait for an Deferred-Object // wait for .done() function

回答by herrlock

You can use the attachRequestCompleted-listener from the Model [1]

您可以使用模型[1] 中的 attachRequestCompleted-listener

model.attachRequestCompleted(function(){
    console.log(this.getData()); //"this" is the model
});

Another function to use is

另一个要使用的功能是

$.get(url, function(response){
    console.log(response);
    model.setData(response);
});
// or
$.ajax(url, {
    success: function(){
        console.log(response);
        model.setData(response);
    }
});

This has the advantage that you can configure the request with every setting that jQuery.ajax accepts [2]

这样做的好处是您可以使用 jQuery.ajax 接受的每个设置来配置请求[2]

回答by Kyle

Another way to achieve this is to use the attachEventOncemethod from EventProvider.

实现此目的的另一种方法是使用attachEventOnceEventProvider 中的方法。

oModel.attachEventOnce("requestCompleted", function(oEvent) {
    console.log(JSON.parse(oEvent.getParameter("response").responseText));
}, this);

It's best to use this approach when you only need to react to one request, and not all. Otherwise, if you use oModel.attachRequestCompleted(...), all requests will go through the same handler function.

当您只需要响应一个请求而不是所有请求时,最好使用这种方法。否则,如果您使用oModel.attachRequestCompleted(...),则所有请求都将通过相同的处理程序函数。

You can also use method chaining to make this a little easier.

您还可以使用方法链来简化此操作。

oModel.attachEventOnce(...)returns the object that called the method, so you can load your data and handle the callback all in one statement.

oModel.attachEventOnce(...)返回调用该方法的对象,因此您可以在一个语句中加载数据并处理回调。

oModel.attachEventOnce("requestCompleted", function(oEvent) {
    console.log(JSON.parse(oEvent.getParameter("response").responseText));
}, this).loadData("http://127.0.0.1/data/config.json");

This will first execute the loadData()request, and then console the response when the request has been completed. It will only use the callback function the first time a request is made. Subsequent requests will not go through the callback function.

这将首先执行loadData()请求,然后在请求完成后控制台响应。它只会在第一次发出请求时使用回调函数。后续的请求不会经过回调函数。

If you want ALL requests to go through the SAME callback function, you can do the same thing but using oModel.attachRequestCompleted(...)

如果您希望所有请求都通过 SAME 回调函数,您可以执行相同的操作,但使用 oModel.attachRequestCompleted(...)

oModel.attachRequestCompleted(function(oEvent) {
    console.log(JSON.parse(oEvent.getParameter("response").responseText));
}, this).loadData("http://127.0.0.1/data/config.json");

This will execute the loadData()request, console the response, and also console the response of all subsequent requests.

这将执行loadData()请求,控制台响应,并控制台所有后续请求的响应。

NOTE: Be careful using thisin the callback functions. If you don't pass thisas a parameter of the attachRequestCompleted(...)or attachEventOnce(...)methods, then thiswill lose it's original context as the controller, and inherit the context of the object calling the function. herrlock's answer demonstrates how the context of thischanges.

注意:this在回调函数中小心使用。如果不this作为attachRequestCompleted(...)attachEventOnce(...)方法的参数传递,那么this将失去它作为控制器的原始上下文,并继承调用该函数的对象的上下文。herrlock 的回答展示了上下文是如何this变化的。

Event Provider API Reference

事件提供程序 API 参考

回答by Benvorth

Turned out there is a parameter in the .loadData()function to create a sync- call:

原来.loadData()函数中有一个参数来创建一个同步调用:

oModel.loadData("http://127.0.0.1/data/config.json", "", false);

See API-Referenceas well.

另请参阅API 参考