RxJS - Yükleme göstergesi

Question

Bir AJAX akışı için bir yükleme göstergesi görüntülemenin "Rx" yolu etrafında kafamı almak için mücadele ediyorum.

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

Bildiğim kadarıyla anladığım kadarıyla ben loading edilir ayarı varsayalım yan etkiler için .do() kullanmak gerekir, ancak bu şeyler yapmanın doğru yolu gibi hissetmez.

Bunu nasıl yapacak daha temiz/daha iyi/uygun bir örnek sunabilir mi?

Teşekkürler!

UPDATE 1

I2 akışları içine bu bölme verdi; requestSource ve responseSource.

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

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

Sonra 2 ayrı abonesi var: o doğru abone olduğu rolünü tutar gibi ben bu yaklaşımı hoşuma gitti

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

. Yanıt abonesi, loading'un true'a ayarlanmasına dikkat etmesine gerek yoktur. Sadece false'a ayarlamayı önemser. . I istek/yanıt dönüştürücü sever

Answer 1

için yükleme özelliği mevcut durumunu temsil eden bir tek akım akışları:

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