comment faire une requête http synchrone dans angular js
Comment faire pour bloquer la requête http dans AngularJS afin que je puisse utiliser la réponse $http sur la toute prochaine ligne?
Dans l'exemple suivant, $http objet de ne pas renvoyer le résultat à la ligne suivante pour que je puisse passer ce résultat à fullcalender(), une bibliothèque JavaScript, parce que $scope.data renvoie la valeur vide.
voici le code d'exemple:
$http.get('URL').success(function(data){
$scope.data = data;
});
$.fullCalender({
data: $scope.data
});
3 réponses
Vous pouvez utiliser promesses pour que.
voici un exemple:
$scope.myXhr = function(){
var deferred = $q.defer();
$http({
url: 'ajax.php',
method: 'POST',
data:postData,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
//if request is successful
.success(function(data,status,headers,config){
//resolve the promise
deferred.resolve('request successful');
})
//if request is not successful
.error(function(data,status,headers,config){
//reject the promise
deferred.reject('ERROR');
});
//return the promise
return deferred.promise;
}
$scope.callXhrAsynchronous = function(){
var myPromise = $scope.myXhr();
// wait until the promise return resolve or eject
//"then" has 2 functions (resolveFunction, rejectFunction)
myPromise.then(function(resolve){
alert(resolve);
}, function(reject){
alert(reject)
});
}
Vous ne pouvez pas, vous aurez besoin de la traiter par des promesses, mais vous pouvez essayer de faire comme ceci:
$http.get('URL').success(function(data){
angular.copy(data, $scope.data);
});
$.fullCalender({
data: $scope.data
});
mais la plupart des gens feraient juste
$http.get('URL').success(function(data){
$.fullCalender({
data: data
});
});
si quelque soit votre objet fullCalender ne fonctionne pas avec les données async, vous pourriez avoir besoin de l'envelopper dans quelque chose comme ng-if ou de le forcer à se redessiner lorsque les données ont été fournies. Vous pouvez également forcer le controller à ne pas charger jusqu'à ce que les données soient chargées en utilisant la route resolve.
Voici un pratique, gracieuseté de l'utilisateur Kirill Slatin qui a posté la réponse en commentaire. Utilisation pratique exemple au bas de la réponse.
Si, comme moi, vous devez utiliser la réponse de l'objet comme une étendue variable, cela devrait fonctionner:
$http.get('URL').success(function(data){
$scope.data = data;
$.fullCalender = $scope.data;
$scope.$apply()
});
$scope.$apply() est ce que persistera l'objet de la réponse de sorte que vous pouvez utiliser ces données.
-
Pourquoi auriez-vous besoin de faire cette?
j'ai essayé de créer une page "Modifier" pour mon application Recettes.
J'ai besoin de remplir mon formulaire avec la recette de données.
Après avoir fait ma demande GET, et avoir passé les données de réponse au $scope.en forme, je n'ai rien eu... $scope.$apply() et Kirill Slatin a beaucoup aidé. Cheers mate!
Voici l'exemple de mon editrecontroller:
$http.get('api/recipe/' + currentRecipeId).then(
function (data) {
$scope.recipe = data.data;
$scope.form = $scope.recipe;
$scope.$apply()
}
);
j'Espère que ça aide!