When to use asObservable() in rxjs?

by

When to use Subject.prototype.asObservable()

The purpose of this is to prevent leaking the “observer side” of the Subject out of an API. Basically to prevent a leaky abstraction when you don’t want people to be able to “next” into the resulting observable.

Example

(NOTE: This really isn’t how you should make a data source like this into an Observable, instead you should use the new Observable constructor, See below).

const myAPI = {
  getData: () => {
    const subject = new Subject();
    const source = new SomeWeirdDataSource();
    source.onMessage = (data) => subject.next({ type: 'message', data });
    source.onOtherMessage = (data) => subject.next({ type: 'othermessage', data });
    return subject.asObservable();
  }
};

Now when someone gets the observable result from myAPI.getData() they can’t next values in to the result:

const result = myAPI.getData();
result.next('LOL hax!'); // throws an error because `next` doesn't exist

You should usually be using new Observable(), though

In the example above, we’re probably creating something we didn’t mean to. For one, getData() isn’t lazy like most observables, it’s going to create the underlying data source SomeWeirdDataSource (and presumably some side effects) immediately. This also means if you retry or repeat the resulting observable, it’s not going to work like you think it will.

It’s better to encapsulate the creation of your data source within your observable like so:

const myAPI = {
  getData: () => return new Observable(subscriber => {
    const source = new SomeWeirdDataSource();
    source.onMessage = (data) => subscriber.next({ type: 'message', data });
    source.onOtherMessage = (data) => subscriber.next({ type: 'othermessage', data });
    return () => {
      // Even better, now we can tear down the data source for cancellation!
      source.destroy();
    };
  });
}

With the code above, any behavior, including making it “not lazy” can be composed on top of the observable using RxJS’s existing operators.

More Related Contents:

  1. How to force observables to execute in sequence?
  2. Difference between .unsubscribe to .take(1)
  3. Rxjs: Observable.combineLatest vs Observable.forkJoin
  4. How to get an observable to return data immediately and every 5 seconds thereafter
  5. What is the correct way to share the result of an Angular Http network call in RxJs 5?
  6. Hot and Cold observables: are there ‘hot’ and ‘cold’ operators?
  7. How to return value from function which has Observable subscription inside?
  8. What are the semantics of different RxJS subjects?
  9. Chaining Observables in RxJS
  10. RxJS: takeUntil() Angular component’s ngOnDestroy()
  11. RxJS Observables nested subscriptions?
  12. ‘of’ vs ‘from’ operator
  13. Best way to “flatten” an array inside an RxJS Observable
  14. How to achieve a debounce service on input keyup event in angular2 with rxjs
  15. ngrx effects error handling
  16. Merge subarrays using Observables
  17. What is pipe for in RxJS?
  18. Observable Finally on Subscribe
  19. BehaviorSubject vs Observable?
  20. Angular 2 – Return data directly from an Observable
  21. How can I close a dropdown on click outside?
  22. Angular 2 beta.17: Property ‘map’ does not exist on type ‘Observable’
  23. Angular Subscribe within Subscribe
  24. RXJS Wait for all observables in an array to complete (or error)
  25. Angular 2 router resolve with Observable
  26. Angular subscribe elegant
  27. Upgrading to Angular 10 – Fix CommonJS or AMD dependencies can cause optimization bailouts
  28. RxJs Array of Observable to Observable of Array
  29. Angular 5 to 6 Upgrade: Property ‘map’ does not exist on type Observable
  30. Angular2 watch for 302 redirect when fetching resource

Leave a Comment