Javascript 在 RxJS 中链接 Observable
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/37771855/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chaining Observables in RxJS
提问by Harindaka
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:
我正在学习 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);
});
My attempts at doing the same solely using RxJS without the use of promises produced the following:
我尝试只使用 RxJS 而不使用 promise 来做同样的事情,结果如下:
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
它产生与承诺链相同的输出。我的问题是
Am I doing this right? Are there any RxJS related improvements that I can make to the above code
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
我这样做对吗?我可以对上述代码进行任何与 RxJS 相关的改进吗
如何让这个可观察链重复执行?即在最后添加另一个订阅只会产生额外的 6,尽管我希望它打印 1、3 和 6。
observableChain.subscribe((finalResult) => { console.log(finalResult); });
observableChain.subscribe((finalResult) => { console.log(finalResult); });
1 3 6 6
采纳答案by user3743222
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 :
关于promise composition vs. Rxjs,由于这是一个常见问题,你可以参考之前关于SO的一些问题,其中:
- How to do the chain sequence in rxjs
- RxJS Promise Composition (passing data)
- RxJS sequence equvalent to promise.then()?
Basically, flatMap
is the equivalent of Promise.then
.
基本上flatMap
相当于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)
对于您的第二个问题,您是要重放已经发出的值,还是要在新值到达时对其进行处理?在第一种情况下,检查publishReplay
操作员。在第二种情况下,标准订阅就足够了。但是,您可能需要注意寒冷。与热二分法取决于您的来源(参见热和冷可观察值:是否有“热”和“冷”运算符?有关概念的说明性解释)