angularjs – RxJS – 装载指示器

发布时间：2020-12-17 07:23:01 所属栏目：安全来源：网络整理

导读：我正在努力探索显示 AJAX流的加载指示器的“Rx”方式. $scope.$createObservableFunction("load") .take(1) .do(function(){ $scope.loading = true; }) .flatMap(contentService.AJAX_THINGY_AS_OBSERVABLE) .delay(300) .subscribe(function(content){ con

我正在努力探索显示 AJAX流的加载指示器的“Rx”方式.

$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()作为副作用,我认为设置加载是,但它不是正确的做事方式.

任何人都可以提供更清洁/更好/适当的如何做到这一点的例子吗？

谢谢！

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

我喜欢这种方法,因为它使订阅的作用保持准确.响应订户无需关心将加载设置为true.它只关心将其设置为false.

我喜欢将请求/响应流转换为表示加载属性当前状态的单个流：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!