The 6 RXJS operators you have to know

Source: Internet
Author: User

1.Concat

Const getpostone$ = Rx.Observable.timer. Mapto ({id:1= Rx.Observable.timer (+). Mapto ({id:2  = = Console.log (res));

Merging multiple observables, when you subscribe one time, the secondary operator merges the results of multiple observable into the obserable of the output.

You can use this operator if your focus is on the order of the output. For example, you can use this operator when you need to send AJAX requests sequentially.

2.forkJoin

Forkjoin is the RX version of the Promise.all () method.

Const getpostone$ = Rx.Observable.timer (+). Mapto ({id:1= Rx.Observable.timer (+). Mapto ({id:2
Print [{id:1}, {id:2}]

Use this operator when you need to run observable concurrently.

3.mergeMap

Const post$ = Rx.Observable.of ({id:1= Rx.Observable.timer (). Mapto ({title: "Post title"= post$. Mergemap (post = getpostinfo$). Subscribe (res = Console.log (res));

First, the two terms in Rx:

1.source observable here refers to post$.

2.inner observable here refers to getpostinfo$.

When the inner observable is emitted, the value is merged into the observable of the output.

4.pairWise

// Tracking the scroll delta rx.observable  ' Scroll ')  = window.pageyoffset)  . pairwise ()  //  pair[1]-pair[0] 

Outputs the current value and the previous value as an array. As above example, when triggering the scroll event you can output [10, 11] [11, 12] [12, 13] ...

5.switchMap

Const clicks$ = Rx.Observable.fromEvent (document, ' click '= Rx.Observable.interval ( innerobservable$)                     = = Console.log (val));

In this example, the interval's subscription will be canceled whenever the document is clicked and a new value will be started.

6.combineLatest

Const clicks$ = Rx.Observable.fromEvent (document, ' click '= Rx.Observable.interval (  innerobservable$)                    = Console.log (val));

If sub-flow a launches new data while waiting for another stream to emit data and the other stream does not send the data, it is merged using the data that is most recently emitted by the sub-stream.

The 6 RXJS operators you have to know

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.