web-dev-qa-db-fra.com

Comment attendre une requête JSONModel.loadData () dans sapui5/openui5

Dans sapUI5/openUI5, j'ai un modèle JSON que je remplis par un fichier du serveur:

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

La console enregistre un oModel vide puisque la demande est asynchrone. 

Comment le rendre synchrone afin que console.log() soit appelé après le chargement des données?

javascriptasynchronoussapui5
7
Benvorth

L'utilisation de requêtes ajax synchrones n'est pas recommandée car elle bloque l'interface utilisateur et entraînera probablement un avertissement dans la console.

Vous pouvez attacher à l'événement Model.requestCompleted pour accéder aux données chargées de manière asynchrone: 

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

Le mot clé que vous recherchez est "différé" -objet -> il vous permet d'attendre une demande AJAX dans SAPUI5. 

Vérifiez ceci pour le contexte SAPUI5: SAPUI5 Attend un objet différé // attend la fonction .done ()

2
zYrEx

Une autre méthode consiste à utiliser la méthode attachEventOnce de EventProvider.

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

Il est préférable d'utiliser cette approche lorsque vous ne devez réagir qu'à une demande, et non à toutes. Sinon, si vous utilisez oModel.attachRequestCompleted(...), toutes les demandes passeront par la même fonction de gestionnaire. 

Vous pouvez également utiliser une méthode de chaînage pour rendre cela un peu plus facile.

oModel.attachEventOnce(...) renvoie l'objet qui a appelé la méthode, vous pouvez donc charger vos données et gérer le rappel en une seule instruction.

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

Cela va d'abord exécuter la demande loadData(), puis consolider la réponse lorsque la demande est terminée. Il utilisera uniquement la fonction de rappel lors de la première demande. Les demandes suivantes ne passeront pas par la fonction de rappel. 

Si vous voulez que TOUTES les demandes passent par la fonction de rappel SAME, vous pouvez faire la même chose mais en utilisant oModel.attachRequestCompleted(...).

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

Ceci exécutera la demande loadData(), consolidera la réponse et consolidera également la réponse de toutes les requêtes suivantes.

REMARQUE: soyez prudent en utilisant this dans les fonctions de rappel. Si vous ne transmettez pas this en tant que paramètre des méthodes attachRequestCompleted(...) ou attachEventOnce(...), alors this perd son contexte d'origine en tant que contrôleur et hérite du contexte de l'objet qui appelle la fonction. La réponse de herrlock montre comment le contexte de this change. 

Référence de l'API du fournisseur d'événement

0
Kyle

Vous pouvez utiliser attachRequestCompleted-listener à partir du modèle. [1]

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

Une autre fonction à utiliser est 

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

Cela présente l’avantage de pouvoir configurer la demande avec chaque paramètre accepté par jQuery.ajax. [2]

0
herrlock