Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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
  })
)
like image 936
Aniruddha Das Avatar asked Sep 20 '18 17:09

Aniruddha Das


People also ask

What is of () RxJS?

RxJS' of() is a creational operator that allows you to create an RxJS Observable from a sequence of values. According to the official docs: of() converts the arguments to an observable sequence. In Angular, you can use the of() operator to implement many use cases.

What is difference between Observable and observer?

Observer : Any object that wishes to be notified when the state of another object changes. Observable : Any object whose state may be of interest, and in whom another object may register an interest.

What is the difference between Observable and a subject in RxJS?

An RxJS Subject is a special type of Observable that allows values to be multicasted to many Observers. While plain Observables are unicast (each subscribed Observer owns an independent execution of the Observable), Subjects are multicast. A Subject is like an Observable, but can multicast to many Observers.

What is difference between Observable and observer in Angular?

Observable are just that — things you wish to observe and take action on. Angular uses the Observer pattern which simply means — Observable objects are registered, and other objects observe (in Angular using the subscribe method) them and take action when the observable object is acted on in some way.


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.

like image 58
SiddAjmera Avatar answered Oct 12 '22 23:10

SiddAjmera