ReactiveX Observable在我想要的时候触发

时间:2017-03-19 09:02:55

标签: observable reactivex

我尝试触发Observable,如点击和间隔。我怎么能触发?

我尝试了obs.retry(),但它什么也没做。

constructor(private http: Http) {
    this.obs = this.http.get('http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1');
    obs.subscribe((response) => {
        console.log(response.text());
    })
    setInterval(() => {
        console.log('update');
        this.obs.retry();
    }, 1000)
}

onClick() {
   console.log('click');
   this.obs.retry();
}

1 个答案:

答案 0 :(得分:1)

您需要重新订阅,然后重试"。

当你构建一个observable时,就像你this.http.get(...)那样,你只是定义了你想要对数据做什么。所以你说"我想从服务器获取数据,然后过滤掉我不想要的数据(.filter(...))并将其映射到我的对象定义,以便我可以使用它( .map(...))",但还没有做出任何这些行动。

当你.subscribe()到那个observable时,你正在运行你刚刚定义的所有这些操作。所以在这种情况下,你应该做类似的事情:

constructor(private http: Http) {
    this.obs = this.http.get('http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1');

    setInterval(() => {
        console.log('update');
        this.loadPosts();
    }, 1000)
}

loadPosts() {
    this.obs.subscribe((response) => {
        console.log(response.text());
    });
}

onClick() {
    console.log('click');
    this.loadPosts();
}

如果您了解这一部分,那么您可以考虑将其作为一个完整的Rx解决方案:

constructor(private http: Http) {
    let httpStream = this.http.get('http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1');
    this.clickSubject = new Rx.ReplaySubject(1);

    this.obs = Rx.Observable.interval(1000)
        .merge(this.clickSubject)
        .flatMap(() => httpStream);

    // Note that is not a good practice to have subscribe in constructors, should have this in init() method or something similar.
    this.obs.subscribe(() => {
        console.log(response.text());
    });
}

onClick() {
    console.log('click');
    this.clickSubject.onNext();
}

在这里,我设置了一个每秒钟点击一次的流(Rx.Observable.interval),将该流加入一个每次出现点击(this.clickSubject)并且每个都有效的流勾选httpStream的新结果。