RxJS - Ladeindikator

Question

Ich habe Schwierigkeiten, den "Rx" Weg zu finden, einen Ladeindikator für einen AJAX-Stream anzuzeigen.

$scope.$createObservableFunction("load") 
     .take(1) 
     .do(function(){ 
      $scope.loading = true; 
     }) 
     .flatMap(contentService.AJAX_THINGY_AS_OBSERVABLE) 
     .delay(300) 
     .subscribe(function(content){ 
      console.log("content",content); 
     },function(error){ 
      $scope.error = error 
     },function() { 
      $scope.loading = false; 
     }); 

Soweit ich es verstehe sollte ich .do() für Nebenwirkungen verwenden, die ich loading nehme Einstellung ist, aber es fühlt sich nicht wie die richtige Art und Weise, Dinge zu tun.

Kann jemand ein saubereres/besseres/richtiges Beispiel dafür zur Verfügung stellen?

Danke!

UPDATE 1

I entschieden, dies in 2 Ströme aufgeteilt; requestSource und responseSource.

var loadRequestSource = $scope.$createObservableFunction("load") 
    .share(); 

var loadResponseSource = loadRequestSource 
    .flatMap(contentService.AJAX_THINGY_AS_OBSERVABLE) 
    .throttle(1000) 
    .share(); 

haben dann 2 separate Abonnenten:

loadRequestSource.subscribe(function() { 
    $scope.loading = true; 
}); 

loadResponseSource.subscribe(function (response) { 
    /* enter logic */ 
    $scope.loading = false; 
    $scope.$digest(); 
}, function (err) { 
    $scope.error = err; 
    $scope.loading = false; 
    $scope.$digest(); 
}); 

ich diesen Ansatz bin gefallen, da sie die Rolle der abonnierten genau hält. Der Antwortteilnehmer muss sich nicht darum kümmern, loading auf true zu setzen. Es ist nur wichtig, es auf false einzustellen.

Answer 1

ich die Anfrage/Antwort wie die Umwandlung eines einzelnen Strom Ströme in, die den aktuellen Zustand Ihrer Lade Eigenschaft darstellt.

const startLoading$ = loadRequestSource.map(() => true); 
const stopLoading$ = loadResponseSource.map(() => false); 
const loadingState$ = Rx.Observable.merge(startLoading$, stopLoading$); 

// Finally, subscribe to the loadingState$ observable 
loadingState$.subscribe(state => { 
    $scope.$applyAsync(() => $scope.loading = state); 
});