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返回一个模拟英雄的Observable （观察不到）。

并没有解释为什么我们应该使用功能以及它究竟做了什么以及它有什么好处？

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，它立即发出作为参数提供给（）的任何值，然后完成。

这比返回静态值更好，因为它允许您编写可以处理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

在第一个例子中，我假设<Window ... xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:command="http://www.galasoft.ch/mvvmlight" ... <DataGrid Name="SomeGrid" ... <i:Interaction.Triggers> <i:EventTrigger EventName="SelectionChanged"> <command:EventToCommand Command="{Binding SelectionChangedCommand}" CommandParameter="{Binding SelectedItems, ElementName=SomeGrid}" /> </i:EventTrigger> </i:Interaction.Triggers> ... <DataGrid.ContextMenu> <ContextMenu> <MenuItem Header="View" Command="{Binding ViewCommand}" /> </ContextMenu> </DataGrid.ContextMenu> ...变量是一个对象数组，其中每个对象对应于接口HEROES（或者是类Hero的实例）。当我们在代码中的某处调用此函数时，它将如下所示：

Hero

这意味着，当我们使用heroService.getHeroes() .subscribe((heroes: Hero[]) => { console.log(heroes) // will output array of heroes: [{...}, {...}, ...] }) Observable创建方法将数组作为参数时，在订阅时它会发出整个数组，而不是它的＆＃39;元素一个接一个

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

基本上，当您使用getHero()方法创建Observable并为其提供参数时，在订阅时它会逐个发出这些参数

Here's a good reference

为什么我们应该使用（）函数的RxJs？

3 个答案: