ペロハム大学

ﾔﾙｿﾞｰ

Angularチュートリアルをやる 4日目

Angular

■ 思ったこと

実生活がしんどすぎてきしめんで泣く！

■ 4. サービスの追加（2）

こっから難しいが、Promiseを乗り越えた今ならば！！

非同期処理にしてみよう

  • 前回heroService.getHeroes()でヒーローを取得しましたが、これは同期的な処理ですので汎用的ではありません。非同期処理として実装してみるべし！
  • 最終的にheroService.getHeroes()したらObservableが返ってくれば正解だ！ObservableはRxJSライブラリで重要なクラス、いや、何が何の何！？

RxJSライブラリとは

  • 非同期処理を実装するためのライブラリ
  • Observable型の実装を提供している

Observableってなによぉ・・！！

  • RxJSの基本的なオブジェクトのことだっ！
  • Observableした関数はConsumer（使う側？）がsubscribe（購読）するまでは実行されない
  • サブスクするConsumerはその処理が完了orサブスク中止するまで状態の変化を通知として受け取れるらすぃ
  • Observableによって公開された値をストリームと呼ぶ
  • サブスクされる前に、ストリームを操作できるオペレーター関数がある
    • 例）of()、map()、filter()、concat()、flatMap()
  • サブスク自体はsubscribe()で呼び出せマス

Observable HeroServiceにしてみよう

  • Observableする関数はgetHeroes()、戻り値をObservable型に書き換えるのだ
  • ストリームをそのままキャッチするにはof()を使おう
    • ofはデータを特に加工せず、そのまま取得するオペレーター
  • 戻り値はHero[]からObservable<Hero[]>となる

HeroesComponentでSubscribe！

  • 戻り値が変わりましたので、getHeroesを使ってるコンポーネントも当然修正が必要になる
  • Observableした関数が処理を終えるまで待ってあげられるようにしよう！
  • 対象メソッドに.subscribe()をチェーンして、その中で引数を変数にセットできるコールバック関数を書いてあげればいーのだ

それはそうと、データ取得成功時にメッセージ出してみようぜ

  • 例によってng generate component messagesでMessagesComponent を作成します
  • app.component.htmlで呼び出してあげれば準備はOK！
  • 次に、MessageService もng generate service message作ったろう
  • message.service内にはmessages変数と add()とclear()をrootで作成するのだ

サービス内でサービスを利用する

  • 今作ったmessageServiceはHeroServiceに注入する
  • 注入のやり方は覚えているか？？コンストラクタに追加して引数に入れるだったね、サービスクラスでもおんなじ！
  • おめでとう、HeroService内でmessageServiceのメソッドおよび変数も使えるようになったぞ！
export class HeroService {
  // サービス内でサービスを利用する
  constructor(private messageService: MessageService) {}

  getHeroes(): Observable<Hero[]> {
    const heroes = of(HEROS);
    this.messageService.add('HeroService: fetched heroes');
    return heroes;
  }
}

HeroesComponentでもmessageServiceを利用する

  • 同じく注入したげればOKなのよ
  • クリック時に動く関数onSelect内でaddするようにしました。これでクリックした結果をメッセージ配列に貯めて画面に出せるようになったってワケ

■ 感想

ゴールデンウイークなのでどんどん進めたいですね・・・・