見出し画像

Angular_非同期処理を実現するObserverとSubscriber　＃265日目

ゆーき|YM202110

Angularではイベント駆動型の非同期処理を実現することが可能です。

rxjsライブラリのObservableを使用します。これはsubjectと呼ばれるオブジェクトがobserversと呼ばれるその依存オブジェクトのリストを維持し、状態の変化を自動的に通知する「オブザーバーパターン」というソフトウェア設計パターンになっています。

ブログに分かりやすいイメージ図が貼ってありました。

https://ugo.tokyo/rxjs-observable/

データを発信する側がObserver、データを受信する側がSubscriberと呼ばれ、それぞれ異なるコンポーネントに存在するケースが多いです。

SubscribeされたObservebleは、値に変更がある度に送信され、オペレーターにより処理されたあとにSubscriberに届けられます。


データを発信する側 Observer

実装例を紹介します。Angularの公式チュートリアルからの抜粋で、該当箇所のみ表示しています。getHeroes()関数をObservableで定義しています。

import { Hero } from './hero';
import { Observable, of } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
 

export class HeroService {
  private heroesUrl = 'api/heroes';
  constructor(private http: HttpClient) { }
 
  getHeroes(): Observable<Hero[]> {
    return this.http.get<Hero[]>(this.heroesUrl)
      .pipe(
        tap(heroes => this.log('fetched heroes')), []))
      );
  }


データを受信する側　Subscriber

Observableオブジェクトの次にsubscribeメソッドを使用してデータをsubscribeします。上述のHeroServiceクラスをインポートして活用します。

import { HeroService } from '../hero.service';


  getHeroes(): void {
    this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
  }


一先ずデータを発信する側がObserver、データを受信する側がSubscriber、という点はしっかり覚えておきたいですね。

ここまでお読みいただきありがとうございました！


参考


いいなと思ったら応援しよう！