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
})
)
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.
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.
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.
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.
Observable.create()
and new Observable()
essentially do the same thing.
From Anatomy of an Observable:
Rx.Observable.create
is an alias for theObservable
constructor
, and it takes one argument: thesubscribe
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.
};
});
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With