我努力让自己的头脑绕过" Rx"显示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;
});
据我了解,我应该使用.do()
作为副作用,我认为设置为loading
,但它并不是正确的做事方式。
任何人都可以提供更清洁/更好/适当的例子来说明这一点吗?
谢谢!
更新1
我决定把它分成2个流; requestSource
和responseSource
。
var loadRequestSource = $scope.$createObservableFunction("load")
.share();
var loadResponseSource = loadRequestSource
.flatMap(contentService.AJAX_THINGY_AS_OBSERVABLE)
.throttle(1000)
.share();
然后有2个独立的订阅者:
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();
});
我喜欢这种方法,因为它使订阅的作用保持准确。响应订阅者不需要关心将loading
设置为true
。它只关心将其设置为false
。
答案 0 :(得分:2)
我喜欢将请求/响应流转换为表示加载属性当前状态的单个流:
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);
});