RxJs 中 "new Observable()" 和 "of()" 有什么区别
what is the difference between "new Observable()" and "of()" in RxJs
RxJs
中的new Observable()
和of()
有什么区别?
在我的测试用例中,当我尝试 return new Observable()
它给了我一个有线错误,如果我用 Rxjs 的 of()
替换它,它工作正常。
我的印象是 Observable.create()
、new Observable()
和 of()
做同样的事情。
someService.getMethod().pipe(
...
catchError((e) => {
// some operation
// return new Observable(false as any); // ----> creates error
return of(false as any); // this works perfectly
})
)
Observable.create()
和 new Observable()
本质上做同样的事情。
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
,另一方面是 Observable
上的 static
方法。它会为您创建一个 Observable
,它会一个接一个地发出您指定为参数的值,然后发出完整的通知。
您的实施存在问题:
您对自定义 Observable 的实现是错误的。当你 new
启动一个 Observable 时,你必须将一个 subscribe
函数传递给它的 constructor
,它有一个 observer
作为参数。这个 observer
上有像 next
、error
和 complete
这样的方法,这些方法在该可观察对象的生命周期中的那些特定实例中被调用。
您还应该公开一个 Subscription
对象,上面有一个 unsubscribe
方法,然后消费者可以使用它进行任何清理。
一般实现方式如下:
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]);
})
)
看看这个 Sample StackBlitz 以供参考
什么时候用什么?
new Observable(...)
或 Observable.create(...)
为您提供更精细的粒度控制,您可以在其中定义自己的 subscribe
函数并在其中执行任何您想做的事情。所以你可能想用它来实现自定义的 Observables,这些 Observables 通常不能使用 Observable
上提供的 static
方法创建。但是,对于像您这样的简单用例,使用 Observable.of
或 Observable.from
就足够了。
RxJs
中的new Observable()
和of()
有什么区别?
在我的测试用例中,当我尝试 return new Observable()
它给了我一个有线错误,如果我用 Rxjs 的 of()
替换它,它工作正常。
我的印象是 Observable.create()
、new Observable()
和 of()
做同样的事情。
someService.getMethod().pipe(
...
catchError((e) => {
// some operation
// return new Observable(false as any); // ----> creates error
return of(false as any); // this works perfectly
})
)
Observable.create()
和 new Observable()
本质上做同样的事情。
From Anatomy of an Observable:
Rx.Observable.create
is an alias for theObservable
constructor
, and it takes one argument: thesubscribe
function.
Observable.of
,另一方面是 Observable
上的 static
方法。它会为您创建一个 Observable
,它会一个接一个地发出您指定为参数的值,然后发出完整的通知。
您的实施存在问题:
您对自定义 Observable 的实现是错误的。当你 new
启动一个 Observable 时,你必须将一个 subscribe
函数传递给它的 constructor
,它有一个 observer
作为参数。这个 observer
上有像 next
、error
和 complete
这样的方法,这些方法在该可观察对象的生命周期中的那些特定实例中被调用。
您还应该公开一个 Subscription
对象,上面有一个 unsubscribe
方法,然后消费者可以使用它进行任何清理。
一般实现方式如下:
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]);
})
)
看看这个 Sample StackBlitz 以供参考
什么时候用什么?
new Observable(...)
或 Observable.create(...)
为您提供更精细的粒度控制,您可以在其中定义自己的 subscribe
函数并在其中执行任何您想做的事情。所以你可能想用它来实现自定义的 Observables,这些 Observables 通常不能使用 Observable
上提供的 static
方法创建。但是,对于像您这样的简单用例,使用 Observable.of
或 Observable.from
就足够了。