angular - RxJS - .subscribe() 与 .publish().connect()

标签 angular rxjs rxjs5

这主要是一个 RxJs 最佳实践/方法问题,因为我的 POC 代码有效,但我是 RxJs 的新手。

问题归结为 .subscribe().publish().connect(),因为它们似乎做同样的事情。

在我的 angular2 应用程序中,我有一个按钮调用一个函数来注销用户,它调用我的服务中的一个函数来执行一些服务器端操作并返回一个 URL 以将用户重定向到。为了发起请求,我调用 .subscribe() 使可观察对象开始产生值。我正在阅读一篇关于“冷与热 Observables”的文章,另一种方法是调用 .publish().connect() 而不是 .subscribe()。这两种方法都有什么好处吗?

<a (click)="logout()">Logout</a>

注销函数如下所示:

logout.component.ts

logout() { this.authService.logout(); }

服务(实际注销)如下所示:

auth.service.ts

logout() : Observable<boolean>  {
        this.http.get(this.location.prepareExternalUrl('api/v1/authentication/logout'))
            .map(this.extractData)
            .catch(this.handleError)
            .do((x: string) => { window.location.href = x; })
            .subscribe();    // Option A - 

        return Observable.of(true);

    }

auth.service.alternative.ts

logout() : Observable<boolean>  {
        this.http.get(this.location.prepareExternalUrl('api/v1/authentication/logout'))
            .map(this.extractData)
            .catch(this.handleError)
            .do((x: string) => { window.location.href = x; })
            .publish()  // Option B - Make connectable observable
            .connect(); // Option B - Cause the connectable observable to subscribe and produce my value       

        return Observable.of(true);
    }

最佳答案

subscribe().publish().connect() 之间的区别在于它们何时订阅其源 Observable。考虑以下 Observable:

let source = Observable.from([1, 2, 3])

这个 Observable 在它订阅时将所有值发送给 Observer。因此,如果我有两个观察者,那么他们将按顺序接收所有值:

source.subscribe(val => console.log('obs1', val));
source.subscribe(val => console.log('obs2', val));

这将打印到控制台:

obs1 1
obs1 2
obs1 3
obs2 1
obs2 2
obs2 3

另一方面,调用 .publish() 返回 ConnectableObservable .这个 Observable 没有在它的构造函数中订阅它的源代码(在我们的例子中是 source),只保留它的引用。然后你可以为它订阅多个观察者,什么也不会发生。最后,您调用 connect() 并且 ConnectableObservable 订阅开始发射值的 source。这次已经有两个 Observers 订阅了,所以它一个一个地向他们发送值:

let connectable = source.publish();
connectable.subscribe(val => console.log('obs1', val));
connectable.subscribe(val => console.log('obs2', val));
connectable.connect();

打印到控制台:

obs1 1
obs2 1
obs1 2
obs2 2
obs1 3
obs2 3

查看现场演示:http://plnkr.co/edit/ySWocRr99m1WXwsOGfjS?p=preview

关于angular - RxJS - .subscribe() 与 .publish().connect(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40164752/

相关文章:

angular - 如何为 Angular 中的备用列添加背景颜色

使用 Observable 解决 Angular 2 路由器

Rxjs - 如何提取数组中的多个值并将它们同步反馈给可观察流

angular - 如果类在模板驱动形式 Angular 4 中无效,为什么类不应用于输入元素?

html - 使用 bootstrap 和 Angular 6 在视频上叠加层

angular - 如何修复无法读取未定义的属性 'next'?

javascript - 如何使一个可观察对象依赖于另一个可观察对象

angular - SystemJS 为 rxjs 加载很多文件

rxjs - 为什么 withLatestFrom RxJS 方法不是静态的?

javascript - Angular 实例化类错误