PromiseをObservableに変換する

247
Krishnan Sriram 2016-09-05 06:49.

観測量に頭を包み込もうとしています。オブザーバブルが開発と読みやすさの問題を解決する方法が大好きです。私が読んだように、利益は計り知れません。

HTTPとコレクションのオブザーバブルは単純なようです。このようなものを観察可能なパターンに変換するにはどうすればよいですか。

これは、認証を提供するための私のサービスコンポーネントからのものです。私はこれがAngular2の他のHTTPサービスのように機能することを望みます-データ、エラー、および完了ハンドラーをサポートします。

firebase.auth().createUserWithEmailAndPassword(email, password)
  .then(function(firebaseUser) {
    // do something to update your UI component
    // pass user object to UI component
  })
  .catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // ...
  });

ここでの助けをいただければ幸いです。私が持っていた唯一の代替ソリューションは、を作成することでしたEventEmitter。しかし、私はそれがサービスセクションで物事を行うためのひどい方法だと思います

7 answers

375
Guillaume 2018-06-12 03:38.

RxJS 6.0.0を使用している場合:

import { from } from 'rxjs';
const observable = from(promise);
120
Godfather 2016-09-05 06:53.

これを試して:

import 'rxjs/add/observable/fromPromise';
import { Observable } from "rxjs/Observable";

const subscription = Observable.fromPromise(
    firebase.auth().createUserWithEmailAndPassword(email, password)
);
subscription.subscribe(firebaseUser => /* Do anything with data received */,
                       error => /* Handle error here */);

fromPromise演算子への完全なリファレンスはここにあります

65
fridoo 2019-01-10 03:16.

1直接実行/変換

from以前に作成したPromiseをObservableに直接変換するために使用します。

import { from } from 'rxjs';

// getPromise() is called once, the promise is passed to the Observable
const observable$ = from(getPromise());

observable$サブスクライバーにPromises値を効果的に再生するホットなObservableになります。

プロデューサー(この場合はPromise)はObservableの外部で作成されるため、これはホットなObservableです。複数のサブスクライバーが同じPromiseを共有します。内部のPromiseが解決された場合、Observableの新しいサブスクライバーはすぐにその値を取得します。

2サブスクライブごとの遅延実行

deferPromiseファクトリ関数を入力として使用して、Promiseの作成とObservableへの変換を延期します。

import { defer } from 'rxjs';

// getPromise() is called every time someone subscribes to the observable$
const observable$ = defer(() => getPromise());

observable$なります寒い観察可能

プロデューサー(Promise)がObservableの内部で作成されるため、これはコールドObservableです。各サブスクライバーは、指定されたPromiseファクトリ関数を呼び出すことによって新しいPromiseを作成します。

これによりobservable$、Promiseを作成してすぐに実行せずに、このPromiseを複数のサブスクライバーと共有せずに作成できます。をobservable$効果的に呼び出すための各サブスクライバーfrom(promiseFactory()).subscribe(subscriber)。したがって、各サブスクライバーは、独自の新しいPromiseを作成して新しいObservableに変換し、この新しいObservableにアタッチします。

3多くのオペレーターが約束を直接受け入れる

コンバインほとんどRxJS事業者(例えばmergeconcatforkJoincombineLatest...)、または(例えば観測変換switchMapmergeMapconcatMapcatchError...)直接約束を受け入れます。とにかくそれらの1つを使用している場合はfrom、最初にpromiseをラップするために使用する必要はありません(ただし、コールドオブザーバブルを作成するには、使用する必要がある場合がありますdefer)。

// Execute two promises simultaneously
forkJoin(getPromise(1), getPromise(2)).pipe(
  switchMap(([v1, v2]) => v1.getPromise(v2)) // map to nested Promise
)

ドキュメントまたは実装をチェックして、使用している演算子がObservableInputまたはを受け入れるかどうかを確認しますSubscribableOrPromise

type ObservableInput<T> = SubscribableOrPromise<T> | ArrayLike<T> | Iterable<T>;
// Note the PromiseLike ----------------------------------------------------v
type SubscribableOrPromise<T> = Subscribable<T> | Subscribable<never> | PromiseLike<T> | InteropObservable<T>;

fromdefer例の違い: https //stackblitz.com/edit/rxjs-6rb7vf

const getPromise = val => new Promise(resolve => {
  console.log('Promise created for', val);
  setTimeout(() => resolve(`Promise Resolved: ${val}`), 5000);
});

// the execution of getPromise('FROM') starts here, when you create the promise inside from
const fromPromise$ = from(getPromise('FROM'));
const deferPromise$ = defer(() => getPromise('DEFER'));

fromPromise$.subscribe(console.log);
// the execution of getPromise('DEFER') starts here, when you subscribe to deferPromise$
deferPromise$.subscribe(console.log);
1
Shivang Gupta 2018-11-28 01:49.

サブジェクトを使用して、promiseからそのnext()関数をトリガーすることもできます。以下のサンプルを参照してください。

以下のようなコードを追加します(私はサービスを使用しました)

class UserService {
  private createUserSubject: Subject < any > ;

  createUserWithEmailAndPassword() {
    if (this.createUserSubject) {
      return this.createUserSubject;
    } else {
      this.createUserSubject = new Subject < any > ();
      firebase.auth().createUserWithEmailAndPassword(email,
          password)
        .then(function(firebaseUser) {
          // do something to update your UI component
          // pass user object to UI component
          this.createUserSubject.next(firebaseUser);
        })
        .catch(function(error) {
          // Handle Errors here.
          var errorCode = error.code;
          var errorMessage = error.message;
          this.createUserSubject.error(error);
          // ...
        });
    }

  }
}

以下のようなコンポーネントからユーザーを作成します

class UserComponent {
  constructor(private userService: UserService) {
    this.userService.createUserWithEmailAndPassword().subscribe(user => console.log(user), error => console.log(error);
    }
  }

1
Mateja Petrovic 2020-01-23 11:20.

deferを使用することもできます。主な違いは、約束が熱心に解決または拒否されないことです。

0
khizer 2020-04-21 11:56.

promise機能のラッパーを追加して、Observableをオブザーバーに返すことができます。

  • defer()演算子を使用してレイジーオブザーバブルを作成します。これにより、オブザーバーがサブスクライブしている場合にのみオブザーバブルを作成できます。
import { of, Observable, defer } from 'rxjs'; 
import { map } from 'rxjs/operators';


function getTodos$(): Observable<any> {
  return defer(()=>{
    return fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(json => {
        return json;
      })
  });
}

getTodos$().
 subscribe(
   (next)=>{
     console.log('Data is:', next);
   }
)

0
Jonathan 2020-11-01 10:36.
import { from } from 'rxjs';

from(firebase.auth().createUserWithEmailAndPassword(email, password))
.subscribe((user: any) => {
      console.log('test');
});

これは、上記の回答のいくつかを組み合わせてコードをpromiseからobservableに変換する短いバージョンです。

Related questions

MORE COOL STUFF

「水曜日」シーズン1の中心には大きなミステリーがあります

「水曜日」シーズン1の中心には大きなミステリーがあります

Netflixの「水曜日」は、典型的な10代のドラマ以上のものであり、実際、シーズン1にはその中心に大きなミステリーがあります.

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ケイト・ミドルトンは、州の夕食会と州の訪問中にカミラ・パーカー・ボウルズからスポットライトを奪いたくなかった、と専門家は言う.

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンが、オリビア・ワイルドが彼女とハリー・スタイルズとの間の「難しい」が「非常に友好的」な分割を恒久的にすることを望んでいる理由を見つけてください.

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする 

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする&nbsp;

エリザベス女王の死後、ケイト・ミドルトンが舞台裏で「非常に困難な時期」を過ごしていたと伝えられている理由を調べてください.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

ラーム・エマニュエルがシカゴ警察の警視を解雇し、身を守る

ラーム・エマニュエルがシカゴ警察の警視を解雇し、身を守る

シカゴ市長のラーム・エマニュエルは、シカゴの警察官による17歳のラカン・マクドナルドの銃撃の失敗した取り扱いに続いて、市の警視官、ギャリーF.マッカーシーを解雇しました。

ダグ・マローネの理想的な食事は、ボローニャのサンドイッチです。

ダグ・マローネの理想的な食事は、ボローニャのサンドイッチです。

写真:ローガンボウルズ/ゲッティイメージズジャイアンツがベンマカドゥーを解雇したので、他の誰かがジムトムスラの精神的後継者でなければなりません。季節だった。ジャガーズのダグ・マローネ監督は、孤独なボローニャサンドイッチに親しみを持っていることを考えると、すでにその役割を担う有力な候補者のようです。

人々がやめる最も一般的な時間、およびプッシュスルーする方法

人々がやめる最も一般的な時間、およびプッシュスルーする方法

時には、それが副次的なプロジェクト、仕事、人間関係、または人生の他の部分であるかどうかにかかわらず、辞めることが最良の選択肢です。しかし、何かを完了するためのリソースがないため、物事が困難になったとき、タイミングが私たちに必要なように「感じ」させたときにも、私たちは辞めます。

黒人女性、あなたの内訳へようこそ

黒人女性、あなたの内訳へようこそ

著者のベニルデ・リトルは、母親の死後のうつ病との戦いを新しい回想録「Welcome toMyBreakdown」で記録しています。チェスター・トイの作家ベニルデ・リトルは、黒人女性にそれが大丈夫だと知ってもらいたいと思っています。

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、子供向けのパズルの本の序文を書き、ジョージ王子、シャーロット王女、ルイ王子と一緒にテキストを読むと述べた.

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

Yak's Produce は、数十個のつぶれたメロンを野生動物のリハビリ専門家であるレスリー グリーンと彼女のルイジアナ州の救助施設で暮らす 42 匹の動物に寄付しました。

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

8 枚目のスタジオ アルバムのリリースに向けて準備を進めているデミ ロヴァートは、「スーパー グレート ガイ」と付き合っている、と情報筋は PEOPLE に確認しています。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

ホームオフィスのセットアップ術を極めよう!AppExert の開発者は、家族全員が一緒にいる場合でも、在宅勤務の技術を習得しています。祖父や曽祖父が共同家族で暮らしていた頃の記憶がよみがえりました。

2022 年、私たちのデジタル ライフはどこで終わり、「リアル ライフ」はどこから始まるのでしょうか?

20 年前のタイムトラベラーでさえ、日常生活におけるデジタルおよびインターネットベースのサービスの重要性に驚くことでしょう。MySpace、eBay、Napster などのプラットフォームは、高速化に焦点を合わせた世界がどのようなものになるかを示してくれました。

ニューロマーケティングの秘密科学

ニューロマーケティングの秘密科学

マーケティング担当者が人間の欲望を操作するために使用する、最先端の (気味が悪いと言う人もいます) メソッドを探ります。カートをいっぱいにして 3 桁の領収書を持って店を出る前に、ほんの数点の商品を買いに行ったことはありませんか? あなたは一人じゃない。

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

私たちが住んでいる世界を確実に理解するには、データが必要です。ただし、空間参照がない場合、このデータは地理的コンテキストがないと役に立たなくなる可能性があります。

Language