RxJS - Indicatore caricamento

Question

Non riesco a capire come funziona il modo "Rx" di visualizzare un indicatore di caricamento per un flusso AJAX.

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

Per quanto ho capito dovrei usare .do() per gli effetti collaterali, che suppongo impostazione loading è, ma non si sente come il modo giusto di fare le cose.

Qualcuno può fornire un esempio più pulito/migliore/corretto di come farlo?

Grazie!

UPDATE 1

ho deciso di dividere questo in 2 corsi d'acqua; requestSource e responseSource.

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

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

Poi hanno 2 abbonati separati:

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(); 
}); 

mi sta piacendo questo approccio in quanto mantiene il ruolo delle sottoscrive accurate. Il sottoscrittore della risposta non deve preoccuparsi dell'impostazione di loading a true. Si preoccupa solo di impostarlo su false.

Answer 1

Mi piace trasformare la richiesta/risposta flussi in un unico flusso che rappresenta lo stato corrente della vostra proprietà di carico:.

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