【问题标题】:Angular2 Http double subscribeAngular2 Http双重订阅
【发布时间】:2016-02-14 20:38:44
【问题描述】:

是否可以调用Subscribe方法两次?

我正在尝试构建 api 工厂,它将数据保存在工厂中,但是这些数据可以在每个 ajax 调用中被不同的组件使用。

工厂

export class api {

    result = [];

    constructor (protected http: Http) { }

    getData ()
    {
        return this.http.get('./friends.json').map((res: Response) => res.json()).subscribe(res => this.result = res);
    }
}

测试组件,再次调用subscribe方法

export class TestPage {

    showListResult; 

    constructor (protected api: api) {

        this.api.getData().subscribe(res => this.showListResult = res)
    }

}

【问题讨论】:

    标签: typescript angular angular2-http


    【解决方案1】:

    您可以返回新的 Observable 包装器。像这样的东西应该可以工作:

    import {Observable} from 'rxjs/Observable'
    
    export class api {
    
        result = [];
    
        constructor (protected http: Http) { }
    
        getData () {
            return new Observable(observer => {
                this.http.get('./friends.json')
                    .map((res: Response) => res.json())
                    .subscribe(res => {
                        this.result = res;
                        observer.next(res);
                        observer.complete();
                    });
            });
        }
    }
    

    【讨论】:

    • 删除分享部分,并检查我的答案。使用new Observableobserver.next(res); 的要点。
    • 我发布的示例应该是这样的。确保导入 Observable。
    • 'observer.next(res);' 是做什么的而observer.complete();呢?
    • @dfsq 这样做的好处是什么,而不是仅仅分享原始的 observable?
    • @MarkM 在你已经给出分享答案后我发布了这个版本(为什么要删除它?它很有用)。
    【解决方案2】:

    如果您想发出一次 HTTP 请求,并将结果共享给多个订阅者,那么我建议使用可连接的观察者来发布和重放最后发出的值:

    this.observable = http.get('...').map(t=> t.json()).publishReplay().refCount();
    

    每个新订阅者都将重播上次发出的值,而无需发出新的 HTTP 请求。

    Demo Plnkr

    这个答案类似于这个SO question and answer

    【讨论】:

    • 感谢您的评论 - 我删除了答案,因为它显然是错误的。现在开始挖掘一些我认为可以正常工作的代码......
    猜你喜欢
    • 2016-11-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-10-28
    • 2017-04-13
    • 2018-02-11
    • 1970-01-01
    • 2017-07-14
    相关资源
    最近更新 更多