为什么我们应该使用 RxJs of() 函数？

Question

在 angular2 的 angular.io 教程的服务部分中，我点击了一个名为 of.for 的方法：

getHeroes(): Observable<Hero[]> {
  return of(HEROES);
}

或在下面的示例中：

getHero(id: number): Observable<Hero> {
  // Todo: send the message _after_ fetching the hero
  this.messageService.add(`HeroService: fetched hero id=${id}`);
  return of(HEROES.find(hero => hero.id === id));
}

在angular.io中刚刚解释过

使用 RxJS of() 返回一个模拟英雄的 Observable (Observable).

并且没有解释为什么我们应该使用of 运算符以及它的具体作用和好处是什么？

Answer 1

他们之所以使用of()，是因为它非常易于使用，而不是真正的 HTTP 调用。

在实际应用程序中，您可以像这样实现getHeroes()：

getHeroes(): Observable<Hero[]> {
  return this.http.get(`/heroes`);
}

但由于您只想使用模拟响应而不创建任何真正的后端，您可以使用 of() 来返回虚假响应：

const HEROES = [{...}, {...}];

getHeroes(): Observable<Hero[]> {
  return of(HEROES);
}

您的应用程序的其余部分将照常工作，因为 of() 是一个 Observable，您以后可以像使用 this.http.get(...) 一样订阅或链接运算符。

of() 所做的唯一事情是它在订阅时立即将其参数作为单个发射发射，然后发送 complete 通知。

Answer 2

Observable.of() 对于在实现异步交互（例如，对 API 的 http 请求）之前维护 Observable 数据类型很有用。

正如Brandon Miller 建议的那样，Observable.of() 返回一个 Observable，它立即发出提供给 of() 的任何值作为参数，然后完成。

这比返回静态值要好，因为它允许您编写可以处理 Observable 类型（同步和异步工作）的订阅者，甚至在实现异步进程之前。

//this function works synchronously AND asynchronously
getHeroes(): Observable<Hero[]> { 
  return Observable.of(HEROES)
  //-OR-
  return this.http.get('my.api.com/heroes')
  .map(res => res.json());
}

//it can be subscribed to in both cases
getHeroes().subscribe(heroes => {
  console.log(heroes); // '[hero1,hero2,hero3...]'
}

//DON'T DO THIS
getHeroesBad(): Array<Hero> {
  return HEROES                             //Works synchronously
  //-OR-
  return this.http.get('my.api.com/heroes') //TypeError, requires refactor
}

Answer 3

在第一个示例中，我假设HEROES 变量是一个对象数组，其中每个对象都对应于接口Hero（或者是类Hero 的实例）。当我们在代码中的某处调用这个函数时，它的行为是这样的：

heroService.getHeroes()
  .subscribe((heroes: Hero[]) => {
    console.log(heroes) 
    // will output array of heroes: [{...}, {...}, ...]
  })

这意味着，当我们使用 Observable 的 of 创建方法以数组作为参数时，订阅时它将发出整个数组，而不是一个接一个地发出它的元素

在第二个示例中，当我们订阅从getHero() 方法返回的Observable 时，它只发出一个英雄，其id 对应于给定的id。

基本上，当您使用 of 方法创建 Observable 并为其提供参数时，它会在订阅时一个接一个地发出这些参数

Here's a good reference