The RXJS in Angular2

RXJS Library

RxJS (reactive Extensions) is a third-party library provided by angular that implements asynchronous observation mode (asynchronous observable pattern).

Enable RXJS operation

RXJS is very large, usually as long as we need the characteristics of the good. Angular has a rxjs/Observable simple version in the module Observable , but it lacks all the operations we need, including the methods mentioned above map .

We introduce all RXJS actions when the app starts:

' Rxjs/rx ';

First we view ' rxjs/Observable ' introduced inObservable方法

 from ' rxjs/observable ';

Next, in our constructor, we create a new observable.

 public data:observable<array<number>>;  This New OBSERVABLE (Observer =          = {              observer.next);              Observer.next (+);              Observer.complete ();            - );          Console.log ('Started Observable sequence! ' );      });

Finally we subscribe to this object:

      This . Data.subscribe (          this. Values.push (value),          thistrue,            This true       );

Filter,map

Import {Component} from 'Angular2/core'Import {Observable} from 'rxjs/observable'; Import'Rxjs/rx'; @Component ({Template: '}) Exportclassmyrxcomponent { Publicdata:observable; Constructor () { This. data =NewObservable (observer=>{            varCount =0; SetInterval (()={observer.next (Count++); }, +)        })         This. Data.filter (value = value<3). Subscribe (Value=Console.log (value))}}

Restore response to Promise

Although the http API returns Observable<Response> , we can convert it to promise.

Observable conversion to promise only needs to be called toPromise(success, fail) .

this. http. Get ('./friends.json'= =    {this. Friendsaspromise.friends = Res.json (). Friends;});

Parallel requests

In angular1.x this is done using $ q.all, but in the new HTTP service, this can be done by using the forkjoin operator. The idea is very similar, though in the parallel call you list, and get the results back in the array.

Import {Observable} from  'rxjs/observable'Observable.forkjoin ( This. http.Get('./friends.json'). Map ((Res:response) =Res.json ()), This. http.Get('./customer.json'). Map ((Res:response) =Res.json ())). Subscribe (res= This. Combined = {friends:res[0].friends, customer:res[1]});

Cancel observables Monitoring

Observales supports unsubscribe. If you inadvertently make an HTTP request and want to cancel the processing of the response.

Getcapitol (country) {    if(this. pendingrequest) {        this. Pendingrequest.unsubscribe ();    }      This this. http. Get ('./country-info/' + country)                           = = Res.json ()                          )this. Capitol = res.capitol);} 

Unsubscribe () effectively eliminates the processing of HTTP responses. This makes sure that we only honor the latest requests and avoid the processing of the requested orders.

Interrupt Data flow, select Data Flow

In reality, we want to not request a server for every character input, and we want character input to be broken off in 300 milliseconds!

Subject used to create a stream:

 from ' Rxjs/subject '

Declare a flow:

New Subject ();

Transfer data, major data changes, trigger observable:

Country.next ('data')

To define the request method:

this =this. http. Get ('./country-info/'. JSON'=  ' this. Capitol = Res.capitol);

Import {JSONP, Response} from 'angular2/http'; import {Observable} from 'rxjs/observable'; import {Subject} from 'Rxjs/subject'@Injectable () exportclassSearchservice {querystream=NewSubject (); Generatesuggestions (query:string) {         This. Querystream.onnext (query). Debounce ( -). Map (Query= This. Jsonp.request (' http://urlendpoint/${query} '). Map ((Res:response) =Res.json ()). Subscribe (Results=Console.log (results)); )    }}

The RXJS in Angular2