[RxJS] Combining streams in RxJS

Source:link

We'll looking some opreators for combining stream in RxJS:

• Merge
• Combinelatest
• Withlatestfrom
• Concat
• Forkjoin
• Flatmap/switchmap

Merge:

Observable.mergeBehaves like a "logical or" to has your stream handle one interaction or another.

Let btn1 = Document.queryselector ("#btn1"= Document.queryselector ("#btn2"= Rx.Observable.fromEvent (BTN1, "click"= Rx.Observable.fromEvent (btn2, "click"= btn1click$.map (ev ) = {  console.log ("button 1 clicked"= btn2click$.map (ev) + = {  Console.log ( "Button 2 clicked"= Rx.Observable.merge (btn1log$, btn2log$); Clicks$.subscribe ();

Combinelatest:

Ofter used when one of the streams value changed, then produce a side effect:

varSource1 = Rx.Observable.interval (1000). Map (function(i) {return' First: ' +i;});varSource2 = Rx.Observable.interval (2000). Map (function(i) {return' Second: ' +i;});//Combine latest of Source1 and source2 whenever either gives a valuevarSource =Rx.Observable.combineLatest (Source1, Source2). Take (4);varSubscription =Source.subscribe (function(x) {console.log (x); },  function(Err) {Console.log (' Error:%s ', err); },  function() {Console.log (' Completed '); });/*["first:0", "second:0"] ["first:1", "second:0"] ["First:2", "second:0"] [first:2 "," Second:1 "]" completed "*/

Withlatestfrom:

varSource1 = Rx.Observable.interval (1000). Map (function(i) {returni;});varBTN = Document.queryselector ("#btn");varSource2 = Rx.Observable.fromEvent (btn, "click");varSource =Source1.withlatestfrom (Source2, (Source1, click)=({timer:source1, clicks:click.x})). Take (4);varSubscription =Source.subscribe (function(x) {console.log (x); },  function(Err) {Console.log (' Error:%s ', err); },  function() {Console.log (' Completed '); });

Read the difference between combinelatest and withlatestfrom: Link.

Concat:

Concat would combine and observables into a combined sequence, but the second observable would not start emitting until the First one has completed.

Let first = Rx.Observable.interval (+). Take (3).  Do ((i) = {Console.log ("First:"= Rx.Observable.interval). Take (3).  Do ((i) = {Console.log ("Second:", I);}); First.concat (second). Subscribe (); /* "First :" 0 "First:" 1 "First:" 2 "Second:" 0 "Second:" 1 "Second:"2  */

Forkjoin:
We use the Forkjoin to execute observables in parallel. One common use case of this is making multiple HTTP requests in parallel. In my sample I am forkjoining II very simple observables, and the key point was that the Subscriber won ' t receive any Valu Es until both observables have completed.

Let first = Rx.Observable.interval (+). Take (6= Rx.Observable.interval (+). Take (3); Rx.Observable.forkJoin (first, second). Subscribe (  +=    {//  [5, 2]   },  = = {    console.log (err);  }  ,= = {    Console.log (" Completed ");  // completed   });

Flatmap/switchmap

FlatMap and Switchmap Basic are the same.

Just Switchmap only care about the latest value, would ignore the previous value. So good the use with HTTP reuqest.

The reason to use FlatMap are because inside Observable you migth return another Observable, such as:

var btn = Document.queryselector ("#btn"); var click$ = Rx.Observable.fromEvent (btn, "click"); var promise$ = Rx.Observable.fromPromise (jquery.http (' xxx ')); var xhrcall$ = Click$.flatmap (() = =    {return= = {  Console.log (res);    })

Inside Observalbe return Another Observable, would create a 2-d Observable, just like Inside map Ruturn another array, would Create 2-d Array.

So we need to flatten it.

[RxJS] Combining streams in RxJS