Sharing Top Content from the Angular-sphere.

Angular 2: Observable Tips & Tricks Angular 2: Observable Tips & Tricks

Check it out! #angular2 #observable Tips & Tricks! 
#rxjs #angularjs @angularjs

  • A simple flag that you can switch on teardown could cause all active subscriptions to unsubscribe themselves without having to hold on to their references.
  • There are subtle differences between the two, but both operators will flatten the results of the first request while returning the results of the second request.
  • Switch map will unsubscribe from the first request as soon as the second request starts emitting a value.
  • There are many, many more operators available in the RxJS Observable library, but these are just a few useful operators that may simplify some of your workflows.
  • Observables are great for chaining together, which are useful when you have a request that depends on the results from a previous request.

With Angular 2 adopting the RxJS Observable framework as standard for its HTTP implementation, this opens up a world of possibilities for developers. Still, the depth and breadth of the framework can be overwhelming to some who are just looking for simple solutions to common problems.

 

This article aims to demonstrate some of the more useful Observable operators and give examples of common situations where they would come in handy.

 

@DEV6tweet: Check it out! #angular2 #observable Tips & Tricks!
#rxjs #angularjs @angularjs

With Angular 2 adopting the RxJS Observable framework as standard for its HTTP implementation, this opens up a world of possibilities for developers. Still, the depth and breadth of the framework can be overwhelming to some who are just looking for simple solutions to common problems.

This article aims to demonstrate some of the more useful Observable operators and give examples of common situations where they would come in handy.

Retrying a request is fairly complicated using Promises, but Observables greatly simplify this process. However, the standard retry operator may not be ideal for most use cases as you typically want to delay the retry attempts to ensure a greater chance of success.

Enter retryWhen. retryWhen accepts a function as a parameter, passing the error and expecting an Observable returned. This allows you the flexibility to do things such as:

Any combination of the above operators can make for some more robust error handling and retry logic to improve your applications.

Do you find yourself having to hold references to Observable Subscription objects in order to properly unsubscribe from them during clean up? The Observable operator takeWhile can provide a cleaner abstract to manage your subscriptions.

The takeWhile operator simply expects a method or Boolean condition and will continue receiving values emitted from the Observable until such a condition is false or the Observable fires its completion. Thus, a simple flag that you can switch on teardown could cause all active subscriptions to unsubscribe themselves without having to hold on to their references.

TakeWhile can prove to be very useful in managing observable subscriptions, effectively enabling an observable on/off state.

While the operator cache has been deprecated in later versions of the RXJS Observable framework, there are still many cases where one would want to be able to store and re-emit observable data throughout the application without having to make the same request every time.

The cache operator was really just syntactic shorthand for the publishReplay and refCount operators. Chaining the two together can still be used to effectively create a cache. The Observable will only make the outgoing request once, but will re-emit that result to any subscribers.

Other useful repetition operators include publishLast, and share, which is shorthand for the publish and refCount operations.

Observables are great for chaining together, which are useful when you have a request that depends on the results from a previous request. Operators such as switchMap and flatMap can trigger a series of requests, using the results of the previous request. This can also be combined with the caching mechanisms above.

Observable.request().switchMap( return Observable.request() ) .subscribe();

There are subtle differences between the two, but both operators will flatten the results of the first request while returning the results of the second request. Switch map will unsubscribe from the first request as soon as the second request starts emitting a value.

There are many, many more operators available in the RxJS Observable library, but these are just a few useful operators that may simplify some of your workflows.

Angular 2: Observable Tips & Tricks Angular 2: Observable Tips & Tricks

Comments are closed, but trackbacks and pingbacks are open.