RxJS中的链接可观察量

时间:2016-06-12 07:42:07

标签: javascript promise reactive-programming rxjs rxjs5

我正在学习RxJS和Angular 2.假设我有一个带有多个异步函数调用的promise链,它依赖于前一个结果,如下所示:

var promiseChain = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(1);
  }, 1000);
}).then((result) => {
  console.log(result);

  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(result + 2);
    }, 1000);
  });
}).then((result) => {
  console.log(result);

  return new Promise((resolve, reject) => {
      setTimeout(() => {
      resolve(result + 3);
        }, 1000);
  });
});

promiseChain.then((finalResult) => {
  console.log(finalResult);
});

我在没有使用承诺的情况下单独使用RxJS的尝试产生了以下结果:

var observableChain = Observable.create((observer) => {
  setTimeout(() => {
    observer.next(1);
    observer.complete();
  }, 1000);
}).flatMap((result) => {
  console.log(result);

  return Observable.create((observer) => {
    setTimeout(() => {
      observer.next(result + 2);
      observer.complete()
    }, 1000);
  });
}).flatMap((result) => {
  console.log(result);

  return Observable.create((observer) => {
    setTimeout(() => {
      observer.next(result + 3);
      observer.complete()
    }, 1000);
  });
});

observableChain.subscribe((finalResult) => {
  console.log(finalResult);
});

它产生与promise链相同的输出。我的问题是

  1. 我这样做了吗?我是否可以对上述代码进行任何与RxJS相关的改进

  2. 如何重复执行此可观察链?即在最后添加另一个订阅只会产生额外的6,但我希望它能打印1,3和6。

    observableChain.subscribe((finalResult)=> {   的console.log(finalResult); });

    observableChain.subscribe((finalResult)=> {   的console.log(finalResult); });

    1 3 6 6

1 个答案:

答案 0 :(得分:40)

关于承诺组合与Rxjs,因为这是一个经常被问到的问题,你可以参考SO上的一些先前提出的问题,其中包括:

基本上,flatMap相当于Promise.then

对于您的第二个问题,您是否要重播已经发出的值,或者您希望在它们到达时处理新值?在第一种情况下,请检查publishReplay运算符。在第二种情况下,标准订阅就足够了。但是你可能需要注意感冒。与热的二分法相比,取决于你的来源(参见Hot and Cold observables : are there 'hot' and 'cold' operators?以获得概念的说明性解释)