/ / Konfigurowanie detektora za pomocą $ watch w Angular JS - javascript, angularjs, watch

Konfigurowanie detektora za pomocą $ watch w Angular JS - javascript, angularjs, watch

Mam usługę asynchronicznie wykonującą dwa kolejne wywołania interfejsu API.

Chciałabym, aby aplikacja czekała, aż oba zostaną rozwiązane przed kontynuowaniem, a ponieważ jedno z połączeń może być lub może nie zostać wykonane, wierzę $watch jest sposobem, aby przejść do połączeń zwrotnych zagnieżdżonych lub powiązanych.

    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!");
}

});

Pomysł polega więc na utworzeniu zmiennej globalnej i obejrzeniu jej jako dwóch połączeń. Drugie wywołanie, które jest warunkowe, natychmiast ustawia zmienną odpowiedzi na true jeśli to nie jest robione.

Ale $watch callback jest uruchamiany tylko raz, a warunek w nim (call1 i call2 == true) nigdy nie jest spełniony.

Odpowiedzi:

1 dla odpowiedzi № 1

zegarek nie działa, ponieważ kompletna odpowiedź nie jest $scope zmienna | własność:

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

następnie w twoim kolejnym używanym kodzie $scope.response_complete zmienić jego wartość, a więc twój $watch zostanie wywołany jako $scope.response_complete zmienione.

Lepsze rozwiązanie:

Jak stwierdzili inni, lepiej jest użyć $broadcast niż $watch, więc zamiast tego obserwuj zmienną, rzucaj wydarzenia i łapaj te zdarzenia wewnątrz twojego $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
});

mam nadzieję, że pomaga


0 dla odpowiedzi nr 2

Jeśli potrzebujesz zmiennej "globalnej" dla bieżącego zakresu, możesz po prostu zrobić:

$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!");
});
});

Możesz również użyć $ rootScope, aby uzyskać bardziej "globalną" wartość. Inne alternatywy to transmisja $ lub usługa w usłudze.

Ale ważniejsze jest upewnienie się, w jaki sposób korzystaszwywołania asynchroniczne. Jeśli chcesz, aby oba zostały rozwiązane, połącz drugie połączenie z pierwszym. Próbka dostarczona przez ciebie nie działałaby, ponieważ response_complete.call1 = true jest wewnątrz wątku asynchronicznego i zawsze jest fałszywa, gdy spróbujesz go zweryfikować