在 RxJS 中链接 Observable [英] Chaining Observables in RxJS

查看:21
本文介绍了在 RxJS 中链接 Observable的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

var promiseChain = new Promise((resolve, reject) => {setTimeout(() => {解决(1);}, 1000);}).then((结果) => {控制台日志(结果);返回新的承诺((解决,拒绝)=> {setTimeout(() => {解决(结果 + 2);}, 1000);});}).then((结果) => {控制台日志(结果);返回新的承诺((解决,拒绝)=> {setTimeout(() => {解决(结果 + 3);}, 1000);});});promiseChain.then((finalResult) => {控制台日志(最终结果);});

我尝试只使用 RxJS 而不使用 promise 来做同样的事情,结果如下:

var observableChain = Observable.create((observer) => {setTimeout(() => {观察者.next(1);观察者.完成();}, 1000);}).flatMap((结果) => {控制台日志(结果);返回 Observable.create((观察者) => {setTimeout(() => {观察者.下一个(结果+ 2);观察者.完成()}, 1000);});}).flatMap((结果) => {控制台日志(结果);返回 Observable.create((观察者) => {setTimeout(() => {观察者.下一个(结果+ 3);观察者.完成()}, 1000);});});observableChain.subscribe((finalResult) => {控制台日志(最终结果);});

它产生与承诺链相同的输出.我的问题是

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

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

    observableChain.subscribe((finalResult) => {控制台日志(最终结果);});

    observableChain.subscribe((finalResult) => {控制台日志(最终结果);});

    1366

解决方案

关于promise composition vs. Rxjs,由于这是一个常见问题,可以参考之前关于SO的一些问题,其中:

基本上,flatMap 相当于 Promise.then.

对于您的第二个问题,您是要重放已经发出的值,还是要在新值到达时对其进行处理?在第一种情况下,检查 publishReplay 运算符.在第二种情况下,标准订阅就足够了.但是,您可能需要注意寒冷.与热二分法取决于您的来源(参见热和 Cold observables :是否有热"和冷"运算符? 对概念的说明性解释)

I'm learning RxJS and Angular 2. Let's say I have a promise chain with multiple async function calls which depend on the previous one's result which looks like:

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

My attempts at doing the same solely using RxJS without the use of promises produced the following:

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

It yields the same output as the promise chain. My questions are

  1. Am I doing this right? Are there any RxJS related improvements that I can make to the above code

  2. How do I get this observable chain to execute repeatedly? i.e. Adding another subscription at the end just produces an additional 6 though I expect it to print 1, 3 and 6.

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

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

    1 3 6 6

解决方案

About promise composition vs. Rxjs, as this is a frequently asked question, you can refer to a number of previously asked questions on SO, among which :

Basically, flatMap is the equivalent of Promise.then.

For your second question, do you want to replay values already emitted, or do you want to process new values as they arrive? In the first case, check the publishReplay operator. In the second case, standard subscription is enough. However you might need to be aware of the cold. vs. hot dichotomy depending on your source (cf. Hot and Cold observables : are there 'hot' and 'cold' operators? for an illustrated explanation of the concept)

这篇关于在 RxJS 中链接 Observable的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆