[Angular 2] Controlling Rx Subscriptions with Async Pipe and BehaviorSubjects
2016-10-02 03:47
489 查看
Each time you use the Async Pipe, you create a new subscription to the stream in the template. This can cause undesired behavior especially when network requests are involved. This lesson shows how to use a BehaviorSubject to observe the http stream so that only one request is made even though we still have two Async pipes in the template.
hero.component.html:
Here you can see, we use twice 'async' pipe, it means we subscribe the stream twice:
In network tab, we can see it calls '1' api twice.
To solve this problem, we can use 'BehaviorSubject' :
This can solve problem, because we only have one subscription to the stream with HTTP get in it.
We do have two subscriptions to this contact here and here because a behavior subject is still an observable but it's not going to make two requests because now it's just observing what comes from the stream instead of basically invoking it twice. Because now we have one subscription to the stream with HTTP calling it being observed by something with two subscriptions on it.
See more: http://www.cnblogs.com/Answer1215/p/5784167.html
Github
hero.component.html:
<div> <h2>{{description}}: {{(hero | async)?.name}}</h2> <div> <a [routerLink]="['/heros', prev()]">Previous</a> <a [routerLink]="['/heros', next()]">Next</a> </div> <div> <input type="text" #inpRef (keyup.enter)="saveHero(inpRef.value)"> </div> <br> <img src="{{(hero | async)?.image}}" alt=""> <div> <a [routerLink]="['/heros']">Back</a> </div> </div>
Here you can see, we use twice 'async' pipe, it means we subscribe the stream twice:
this.hero = this.route.params .map((p:any) => { this.editing = false; this.heroId = p.id; return p.id; }) .switchMap( id => this.starwarService.getPersonDetail(id));
In network tab, we can see it calls '1' api twice.
To solve this problem, we can use 'BehaviorSubject' :
this.hero = new BehaviorSubject({name: 'Loading...', image: ''}) this.route.params .map((p:any) => { this.editing = false; this.heroId = p.id; return p.id; }) .switchMap( id => this.starwarService.getPersonDetail(id)) .subscribe( this.hero);
This can solve problem, because we only have one subscription to the stream with HTTP get in it.
We do have two subscriptions to this contact here and here because a behavior subject is still an observable but it's not going to make two requests because now it's just observing what comes from the stream instead of basically invoking it twice. Because now we have one subscription to the stream with HTTP calling it being observed by something with two subscriptions on it.
See more: http://www.cnblogs.com/Answer1215/p/5784167.html
Github
相关文章推荐
- [Angular] Bind async requests in your Angular template with the async pipe and the "as" keyword
- [Angular 2] Managing State in RxJS with StartWith and Scan
- [RxJS + AngularJS] Sync Requests with RxJS and Angular
- [Angular] Show a loading indicator in Angular using *ngIf/else, the as keyword and the async pipe
- [Angular 2] Rendering an Observable with the Async Pipe
- [Angular 2] Rendering an Observable Date with the Async and Date Pipes
- [Angular 2] Passing Observables into Components with Async Pipe
- [RxJS] Aggregating Streams With Reduce And Scan using RxJS
- [Angular 2] Handling Click Events with Subjects
- [Recompose] Refactor React Render Props to Streaming Props with RxJS and Recompose
- Getting Started with AngularJS 1.5 and ES6: part 3
- Build a Basic CRUD App with Angular 5.0 and Spring Boot 2.0
- C#的多线程——使用async和await来完成异步编程(Asynchronous Programming with async and await)
- [Angular 2] Handling Clicks and Intervals Together with Merge
- Angular 2 Tutorial: Create a CRUD App with Angular CLI and TypeScript
- [RxJS] Changing Behavior with MapTo
- Getting Started with AngularJS 1.5 and ES6: part4
- [AngularJS + RxJS] Search with RxJS
- [RxJS] Toggle A Stream On And Off With RxJS
- ASP.NET Web API 2 external logins with Facebook and Google in AngularJS app