12

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
  })
)
Aniruddha Das
  • 20,520
  • 23
  • 96
  • 132

1 Answers1

12

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.

SiddAjmera
  • 38,129
  • 5
  • 72
  • 110
  • Thanks for explaining well. so when should `Observable.of()` need to use and where `new Observable()` can be used? And is `Observable.create()` is same as `new Observable()` – Aniruddha Das Sep 20 '18 at 18:16
  • 1
    From what I've read, `new Observable()` gives you a more fine grain control where you can define your own `subscribe` function that essentially lets your consumer do several different things. For simple use cases like yours however, using `Observable.of` or `Observable.from` would suffice. – SiddAjmera Sep 20 '18 at 18:19
  • 1
    Or just use subjects, they are the bread and butter of the RxJs developers toolkit. Hardly anybody rolls their own observables once they discover subjects and behavior subjects. – Adrian Brand Oct 17 '19 at 22:52