Configurer un auditeur avec $ watch dans Angular JS - javascript, angularjs, watch

J'ai un service qui effectue deux appels consécutifs vers une API de manière asynchrone.

Je souhaiterais que l’application attende que tous les deux soient résolus avant de continuer et qu’un des appels peut ou non être fait, je crois $watch est la voie à suivre par rapport aux rappels imbriqués ou chaînés.

    var response_complete = {call1:false, call2:false};

$http.post("myapi.com/slug", data, header).then(function(res){

/* ... */

response_complete.call1 = true;

});

if(make_this_call==true){

$http.post("myapi.com/anotherslug", data, header).then(function(res){

/*...*/

response_complete.call2 = true;

});

} else response_complete.call2 = true;

$scope.$watch("response_complete",function(){

if(response_complete.call1==true && response_complete.call2==true){

console.log("DONE!");
}

});

L'idée est donc de créer une variable globale et de la regarder à la fin des deux appels. Le second appel, qui est conditionnel, lui attribue immédiatement la variable de réponse true si ce n'est pas fait.

Mais le $watch callback n'est déclenché qu'une fois et la condition qu'il contient (call1 & call2 == true) n'est jamais remplie.

Réponses:

votre montre ne fonctionne pas car la réponse complète n'est pas un $scope variable | propriété:

 // replace this with $scope property declaration
//var response_complete = {call1:false, call2:false};
$scope.response_complete = {call1:false, call2:false};

puis dans votre utilisation du code suivant $scope.response_complete pour modifier sa valeur et donc votre $watch sera déclenché comme $scope.response_complete modifié.

Une meilleure solution:

Comme d'autres l'ont précisé, il est préférable d'utiliser $broadcast que $watch, au lieu de regarder la variable jeter des événements à la place et attraper ces événements dans votre $scope.

$http.post("myapi.com/slug", data, header).then(function() {
// stuff
$scope.$broadcast("POST_SLUG_COMPLETE");
});

$http.post("myapi.com/anotherslug", data, header).then(function() {
// stuff
$scope.$broadcast("POST_ANOTHERSLUG_COMPLETE");
});

// then in your $scope

$scope.$on("POST_SLUG_COMPLETE", function () {
// stuff
});

$scope.$on("POST_ANOTHERSLUG_COMPLETE", function () {
// stuff
});

J'espère que cela pourra aider

Si vous avez besoin de votre variable "globale" pour la portée actuelle, vous pouvez simplement faire:

$scope.complete = false;
$http.post("myapi.com/slug", data, header).then(function(res) {
$http.post("myapi.com/anotherslug", data, header).then(function(res) {
$scope.complete = true;
console.log("DONE!");
});
});

Vous pouvez également utiliser $ rootScope pour une valeur plus "globale". Les autres alternatives sont $ broadcast ou une propriété à l'intérieur d'un service.

Mais plus important est de savoir comment vous utilisezles appels asynchrones. Si vous voulez que les deux soient résolus, placez le deuxième appel dans le premier. L'exemple fourni par vous ne fonctionnerait pas parce que response_complete.call1 = true est à l'intérieur d'un thread asynchrone et il est toujours faux au moment où vous essayez de le vérifier