what is the difference between "new Observable()" and "of()" in RxJs

user_537647 0
Viewed 7064

What is the difference between new Observable() and of() in RxJs?

In my test cases when I try to return new Observable() it gives me a wired error and if I replace it with the of() from Rxjs it works fine.

My impression was Observable.create(), new Observable() and of() does same thing.

someService.getMethod().pipe(
  ...
  catchError((e) => {
    // some operation
    // return new Observable(false as any);  // ----> creates error
    return of(false as any); // this works perfectly
  })
)
rxjs6 rxjs angular
1 Answers

Observable.create() and new Observable() essentially do the same thing.

From Anatomy of an Observable:

Rx.Observable.create is an alias for the Observable constructor, and it takes one argument: the subscribe function.

Observable.of, on the other hand is a static method on Observable. It creates an Observable for you, that emits value(s) that you specify as argument(s) immediately one after the other, and then emits a complete notification.

Issue with your implementation:

Your implementation of a Custom Observable is wrong. When you new up an Observable, you have to pass in a subscribe function to its constructor which has an observer as an arg. This observer has methods like next, error, and complete on it which gets called at those particular instances in the lifecycle of that observable.

You should also expose a Subscription Object that has an unsubscribe method on it, which can then be used by the consumer for doing any clean-up.

Here's how it can be implemented in general:

const yourCustomObservable = new Observable((observer) => {
  observer.next("This pushes new value to the consumer");
  observer.error("This pushes an error to the consumer");
  observer.complete();

  return function unsubscribe() {
    // When the consumer unsubscribes, clean up data ready for next subscription.
  };
});

For your specific use-case you can either use:

new Observable(...):

import { Observable } from 'rxjs';
...
someService.getMethod().pipe(
  ...
  catchError((e) => {
    // some operation
    return new Observable(observer => observer.next(false));
  })
)

Observable.create:

import { Observable } from 'rxjs';
...
someService.getMethod().pipe(
  ...
  catchError((e) => {
    // some operation
    return Observable.create(observer => observer.next(false));
  })
)

of:

import { of } from 'rxjs';
...
someService.getMethod().pipe(
  ...
  catchError((e) => {
    // some operation
    return of(false);
  })
)

from:

import { from } from 'rxjs';
...
someService.getMethod().pipe(
  ...
  catchError((e) => {
    // some operation
    return from([false]);
  })
)

Have a look at this Sample StackBlitz for ref.

When to use what?

new Observable(...) or Observable.create(...) gives you a more fine grain control where you can define your own subscribe function and do whatever you want in it. So you might want to use it for implementing custom Observables that can't be generally created using the static methods provided on Observable. For simple use cases like yours, however, using Observable.of or Observable.from for that matter, would suffice.

user_26222920
Related