RxJs 中的“new Observable()”和“of()”有什么区别

Ani*_*Das 7 rxjs angular rxjs6

之间有什么区别new Observable()of()RxJs

在我的测试用例中,当我尝试返回new Observable()它时,它给了我一个有线错误,如果我用of()Rxjs替换它,它工作正常。

我的印象是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
  })
)
Run Code Online (Sandbox Code Playgroud)

Sid*_*era 8

Observable.create()并且new Observable()基本上做同样的事情。

来自 Observable 的剖析

Rx.Observable.create是 的别名Observable constructor ,它接受一个参数:subscribe函数。

Observable.of,另一方面是一种static方法Observable。它Observable为您创建一个,它会立即一个接一个地发出您指定为参数的值,然后发出完整的通知。

您的实施问题:

您对自定义 Observable 的实现是错误的。当你new启动一个 Observable 时,你必须将一个subscribe函数传递给它 constructor ,它有一个observer作为参数。这observer有像next, error, 和 之类的方法,complete它们在该 observable 的生命周期中的那些特定实例中被调用。

您还应该公开一个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.
  };
});
Run Code Online (Sandbox Code Playgroud)

对于您的特定用例,您可以使用:

new Observable(...)

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

Observable.create

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

of

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

from

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

查看此示例 StackBlitz以获取参考。

什么时候用什么?

new Observable(...)或者Observable.create(...)为您提供更精细的粒度控制,您可以在其中定义自己的subscribe功能并在其中执行任何您想做的事情。所以,你可能想使用它的实现,可以不使用通常被创建的自定义观测量static提供了方法Observable。但是,对于像您这样的简单用例,使用Observable.ofObservable.from就此而言就足够了。