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 上有像 nexterrorcomplete 这样的方法,这些方法在该可观察对象的生命周期中的那些特定实例中被调用。

您还应该公开一个 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.ofObservable.from 就足够了。