Angular 2 サービスで Observable を返すベストプラクティス

Angular 2 サービスで Observable を作成して返すプログラミング

前提条件

• Angular 2 の基礎知識
• RxJS の基礎知識

概要

Observable は、非同期データストリームを表すオブジェクトです。Angular 2 サービスでは、Observable を使用して、サーバーからのデータ取得、イベントの処理、その他の非同期操作を実行できます。

Observable を作成するには、Observable.create() メソッドを使用します。このメソッドは、observer オブジェクトを受け取り、そのオブジェクトを通じて Observable にデータを送信します。

import { Observable } from 'rxjs';

const observable = Observable.create((observer) => {
  // データを送信する
  observer.next('Hello, world!');

  // Observable を完了する
  observer.complete();
});

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable()
export class MyService {
  getData(): Observable<string> {
    return Observable.create((observer) => {
      // サーバーからデータを取得
      const xhr = new XMLHttpRequest();
      xhr.open('GET', 'https://api.example.com/data');
      xhr.onload = () => {
        if (xhr.status === 200) {
          // データを送信
          observer.next(xhr.responseText);

          // Observable を完了する
          observer.complete();
        } else {
          // エラーを発生させる
          observer.error(new Error('Error fetching data'));
        }
      };
      xhr.send();
    });
  }
}

コンポーネントで Observable を使用するには、async パイプと subscribe() メソッドを使用します。

import { Component, OnInit } from '@angular/core';
import { MyService } from './my.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  data: string;

  constructor(private myService: MyService) {}

  ngOnInit() {
    // サービスから Observable を取得
    const observable = this.myService.getData();

    // Observable を購読
    observable.subscribe((data) => {
      this.data = data;
    });
  }
}

Angular 2 サービスで Observable を作成して返す方法は、データの非同期処理を管理する強力な方法です。このガイドで説明した方法を使用して、サービスで Observable を作成し、コンポーネントでそれを使用することができます。

my.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable()
export class MyService {
  getData(): Observable<string> {
    return Observable.create((observer) => {
      // サーバーからデータを取得
      const xhr = new XMLHttpRequest();
      xhr.open('GET', 'https://api.example.com/data');
      xhr.onload = () => {
        if (xhr.status === 200) {
          // データを送信
          observer.next(xhr.responseText);

          // Observable を完了する
          observer.complete();
        } else {
          // エラーを発生させる
          observer.error(new Error('Error fetching data'));
        }
      };
      xhr.send();
    });
  }
}

app.component.ts

import { Component, OnInit } from '@angular/core';
import { MyService } from './my.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  data: string;

  constructor(private myService: MyService) {}

  ngOnInit() {
    // サービスから Observable を取得
    const observable = this.myService.getData();

    // Observable を購読
    observable.subscribe((data) => {
      this.data = data;
    });
  }
}

<h1>{{data}}</h1>

このサンプルコードを実行すると、コンポーネントのテンプレートに "Hello, world!" と表示されます。

Angular 2 サービスで Observable を作成して返す方法の他の方法

Subject は、Observable と Observer の両方の機能を備えたオブジェクトです。Subject を使用すると、複数のコンポーネントで同じ Observable を共有することができます。

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable()
export class MyService {
  private dataSubject = new Subject<string>();

  getData(): Observable<string> {
    return this.dataSubject.asObservable();
  }

  setData(data: string) {
    this.dataSubject.next(data);
  }
}

コンポーネントでは、Subject を購読してデータを受け取ることができます。

import { Component, OnInit } from '@angular/core';
import { MyService } from './my.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  data: string;

  constructor(private myService: MyService) {}

  ngOnInit() {
    // サービスから Observable を取得
    const observable = this.myService.getData();

    // Observable を購読
    observable.subscribe((data) => {
      this.data = data;
    });
  }
}

BehaviorSubject は、Subject のサブクラスであり、最後の送信された値を保持する機能があります。

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class MyService {
  private dataSubject = new BehaviorSubject<string>('Hello, world!');

  getData(): Observable<string> {
    return this.dataSubject.asObservable();
  }

  setData(data: string) {
    this.dataSubject.next(data);
  }
}

import { Component, OnInit } from '@angular/core';
import { MyService } from './my.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  data: string;

  constructor(private myService: MyService) {}

  ngOnInit() {
    // サービスから Observable を取得
    const observable = this.myService.getData();

    // Observable を購読
    observable.subscribe((data) => {
      this.data = data;
    });
  }
}

import { Injectable } from '@angular/core';
import { ReplaySubject } from 'rxjs';

@Injectable()
export class MyService {
  private dataSubject = new ReplaySubject<string>(2);

  getData(): Observable<string> {
    return this.dataSubject.asObservable();
  }

  setData(data: string) {
    this.dataSubject.next(data);
  }
}

import { Component, OnInit } from '@angular/core';
import { MyService } from './my.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  data: string;

  constructor(private myService: MyService) {}

  ngOnInit() {
    // サービスから Observable を取得
    const observable = this.myService.getData();

    // Observable を購読
    observable.subscribe((data) => {
      this.data = data;
    });
  }
}

上記以外にも、Angular 2 サービスで Observable を作成して返す方法はいくつかあります。これらの方法を参考に、アプリケーションの要件に合った方法を選択してください。