なぜOf（）関数のRxJsを使うべきですか？ angular2ためangular.ioチュートリアルのサービスセクションで

Question

は私が例of.forという名前のメソッドヒット：

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

を以下のサンプルで：angular.ioで

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)); 
} 

だけ

を説明しました

モックヒーローオブオブザーバブルを返すために（）のRxJSを使用して （観察可能）。

私たちはなぜ機能を使用すべきか説明しませんでした。機能とは何か、その利点は何ですか？

Answer 1

それが本当のHTTP呼び出しの代わりに使用することは非常に簡単ですので、彼らはof()を使用している理由です。あなたは、たとえば、このようなgetHeroes()を実装し、実際のアプリケーションで

：

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

しかし、あなたはちょうどあなたが偽の応答を返すようにof()を使用することができます任意の実際のバックエンドを作成せずに嘲笑応答を使用したいので、：

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

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

of()が観察され、後であなたがを使用していただけのようにそれに演算子を購読するか、連鎖することができますので、あなたのアプリケーションの残りの部分は同じように動作するように起こっています210。

の唯一のことは、サブスクリプション時にそのパラメータをシングルエミッションとして即時に送信し、次にcomplete通知を送信することです。

Answer 2

最初の例では、変数HEROESはすべてのオブジェクトがインターフェイスHero（またはクラスHeroのインスタンス）に対応するオブジェクトの配列であると仮定します。私たちは、コードのどこかにこの関数を呼び出すと、それはこのように動作します：

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

それは我々が引数として配列を使用してObservableのof作成方法を使用する場合、サブスクリプションにそれは配列全体を放出すること、を意味し、

Observableを購読すると、それはgetHero()メソッドから返され、指定されたidに対応するidを持つ英雄を1つだけ発行します。基本的には

、あなたがそれにof方法および供給の引数でObservableを作成し、サブスクリプションに、それはこれらの引数を発する一つ一つ

Here's a good reference

Answer 3

Observable.of（）が観測可能性を維持するのに便利です非同期の対話（たとえば、APIへのHTTP要求）を実装する前に、データ型を指定します。

Brandon Millerが示すように、Observable.of（）はObservableを返します。ObservableはObservableを返します。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 
}