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

Question

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

在我的测试用例中，当我尝试返回 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
  })
)

Answer 1

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

From Anatomy of an Observable:

Rx.Observable.create 是Observable constructor 的别名，它有一个参数：subscribe 函数。

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

您的实施存在问题：

您对自定义 Observable 的实现是错误的。当你 new 一个 Observable 时，你必须将一个 subscribe 函数传递给它的 constructor，它有一个 observer 作为参数。这个observer 上有next、error 和complete 之类的方法，在该可观察对象的生命周期中的特定实例上被调用。

您还应该公开一个带有unsubscribe 方法的Subscription 对象，然后消费者可以使用该对象进行任何清理。

一般来说，它的实现方式如下：

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 函数并在其中做任何您想做的事情。因此，您可能希望使用它来实现通常无法使用Observable 上提供的static 方法创建的自定义 Observable。但是，对于像您这样的简单用例，使用 Observable.of 或 Observable.from 就足够了。