Promise を Observable に変換

Angular, Firebase, RxJS での Promise を Observable に変換する

Promise と Observable

Angular, Firebase, RxJS といった技術スタックでは、非同期処理を扱うための基本的な手段として Promise と Observable がよく使用されます。

• Observable：時間に基づいて値を配信するシーケンスを表すオブジェクトです。複数の値を配信することができ、エラー処理やキャンセルもサポートします。
• Promise：非同期処理の結果がいつ完了するかを表すオブジェクトです。一度の完了のみをサポートします。

Promise を Observable に変換する理由

Angular の多くの機能は Observable をベースに構築されており、Observable を使用することで、非同期処理のパイプラインやイベントの処理をより柔軟かつ効率的に行うことができます。そのため、Promise を扱っている場合でも、Observable に変換することで、Angular のエコシステムとよりスムーズに連携することができます。

変換方法

RxJS の from 演算子を使用することで、Promise を Observable に変換することができます。

import { from } from 'rxjs';

const promise = new Promise((resolve) => {
  setTimeout(() => resolve('Hello, world!'), 1000);
});

const observable = from(promise);

observable.subscribe(
  (value) => console.log(value),
  (error) => console.error(error),
  () => console.log('Complet   ed')
);

このコードでは、1秒後に "Hello, world!" を返す Promise を作成し、from 演算子を使用して Observable に変換しています。その後、subscribe メソッドを使用して、Observable の値を受け取り、エラー処理や完了処理を実装しています。

Firebase との連携

Firebase の多くの API は Promise を返しますが、RxJS の from 演算子を使用して Observable に変換することで、Firebase の機能を Angular のコンポーネント内でより自然に扱うことができます。

import { from } from 'rxjs';
import { AngularFireAuth } from '@angular/fire/auth';

const auth = new AngularFireAuth();

const observable = from(auth.signInWithEmailAndPassword('[email protected]', 'password'));

observable.subscribe(
  (user) => console.log(user),
  (error) => console.error(error)
);

このコードでは、Firebase Authentication API を使用してユーザーを認証し、その結果を Observable に変換してサブスクライブしています。

基本的な変換

import { from } from 'rxjs';

const promise = new Promise((resolve) => {
  setTimeout(() => resolve('Hello, world!'), 1000);
});

const observable = from(promise);

observable.subscribe(
  (value) => console.log(value),
  (error) => console.error(error),
  () => console.log('Complet   ed')
);

• 解説
  
  • from 演算子を使用して、Promise を Observable に変換しています。
  • subscribe メソッドを使用して、Observable の値を受け取り、エラー処理や完了処理を実装しています。

Firebase Authentication との連携

import { from } from 'rxjs';
import { AngularFireAuth } from '@angular/fire/auth';

const auth = new AngularFireAuth();

const observable = from(auth.signInWithEmailAndPassword('[email protected]', 'password'));

observable.subscribe(
  (user) => console.log(user),
  (error) => console.error(error)
);

• 解説
  
  • subscribe メソッドを使用して、認証結果を受け取り、エラー処理を実装しています。

HTTP リクエストの処理

import { from } from 'rxjs';
import { HttpClient } from '@angular/common/http';

const http = new HttpClient();

const observable = from(http.get('https://api.example.com/data'));

observable.subscribe(
  (data) => console.log(data),
  (error) => console.error(error)
);

• 解説
  
  • HTTP GET リクエストを行い、その結果を Observable に変換しています。

カスタム Promise の変換

import { from } from 'rxjs';

function myPromise() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() < 0.5) {
        resolve('Success');
      } else {
        reject('Error');
      }
    }, 1000);
  });
}

const observable = from(myPromise());

observable.subscribe(
  (value) => console.log(value),
  (error) => console.error(error)
);

• 解説
  
  • カスタムの Promise を作成し、from 演算子を使用して Observable に変換しています。

toPromise() メソッド

• コード
  

import { from, Observable } from 'rxjs';

const observable: Observable<string> = new Observable((observer) => {
  setTimeout(() => observer.next('Hello, world!'), 1000);
  setTimeout(() => observer.complete(), 2000);
});

const promise = observable.toPromise();

const newObservable = from(promise);

newObservable.subscribe(
  (value) => console.log(value),
  (error) => console.error(error),
  () => console.log('Completed')
);

pipe 演算子と toPromise 演算子

import { from, Observable } from 'rxjs';
import { map, toPromise } from 'rxjs/operators';

const observable: Observable<string> = new Observable((observer) => {
  setTimeout(() => observer.next('Hello, world!'), 1000);
  setTimeout(() => observer.complete(), 2000);
});

const newObservable = observable.pipe(
  map((value) => value.toUpperCase()),
  toPromise(),
  from()
);

newObservable.subscribe(
  (value) => console.log(value),
  (error) => console.error(error),
  () => console.log('Completed')
);

defer 演算子

import { from, defer, Observable } from 'rxjs';

const observable: Observable<string> = defer(() => {
  return new Promise((resolve) => {
    setTimeout(() => resolve('Hello, world!'), 1000);
  });
});

const newObservable = from(observable);

newObservable.subscribe(
  (value) => console.log(value),
  (error) => console.error(error),
  () => console.log('Completed')
);

catchError 演算子と toPromise 演算子

import { from, Observable } from 'rxjs';
import { catchError, map, toPromise } from 'rxjs/operators';

const observable: Observable<string> = new Observable((observer) => {
  setTimeout(() => observer.next('Hello, world!'), 1000);
  setTimeout(() => observer.error('Error'), 2000);
});

const newObservable = observable.pipe(
  map((value) => value.toUpperCase()),
  catchError((error) => {
    return from(new Promise((resolve) => {
      resolve('Error occurred');
    }));
  }),
  toPromise(),
  from()
);

newObservable.subscribe(
  (value) => console.log(value),
  (error) => console.error(error),
  () => console.log('Completed')
);