web-dev-qa-db-ja.com

Angular2 Observable and Promise

Angular2 Observableを使い始めましたが、Promisesで使用した.thenに似たものが見つかりません。

これが私が成し遂げたいことです。

header.component.tsのコード

public login() {
    this._user = AuthService.getInstance().login(this._loginInfo);
}

auth.service.tsのコード

return this._httpClient.post('LoginAction', credentials)
  .map(res => res.json())
  .subscribe(user => {
    return new User(user);
  });

Promiseを使用すると、login関数はPromiseを返し、最終的にサーバーからの実際の応答に変換されます。しかし、Observableではこれは機能しません。

同様のことを行う方法はありますか？ componentのlogin関数内にサブスクライブを配置する必要を避けたい。稼働中のすべての作業を実行し、実際のオブジェクトをcomponentに返したい。

また、PromiseでtoPromiseを作成しようとしましたが、toPromise is not a functionを取得し続けます。

追伸_httpClientは、angular2 httpのラッパーで、ヘッダーを追加するなどしてリクエストを準備します。

編集する

return this._httpClient.post('LoginAction', credentials)
  .map(res => res.json())
  .toPromise().    <-- i keep getting that it is not a function
  then(user => {
    return new User(user);
});

これを行うことで、私のコンポーネントはオブジェクト（必要なもの）を取得し、サービス中に追加のこと（ログに記録したユーザーをlocalstorageに保存するなど）を行うことができます。

そして、Promiseで同じことをしてもうまくいかない（または間違っている）ので、Observableに切り替えましたか？

返されたオブジェクトは（toPromiseを呼び出す前に）Observableであることがわかりますが、実際にはtoPromise関数が表示されません。

angularpromiserxjsobservable
35
Ned

subscribe(...)を呼び出すと、toPromise()を持たないSubscriptionが返されます。コードをsubscribeからmapに移動すると、subscribeの代わりにtoPromise()を使用できます

return this._httpClient.post('LoginAction', credentials)
  .map(res => res.json())
  .map(user => {
    return new User(user);
  }).toPromise();

呼び出し元はPromiseを取得します。

public login() {
    this._user = AuthService.getInstance().login(this._loginInfo)
    .then(result => {
      doSomething();
    });
}

しかし、 `.toPromise（）を省略し、呼び出し元が次のように使用すると、同じ結果が得られます。

public login() {
    this._user = AuthService.getInstance().login(this._loginInfo)
    .subscribe(result => {
      doSomething();
    });
}

唯一の違いはsubscribe()の代わりにthen()であり、ライブラリのユーザーがリアクティブスタイルを好む場合は、彼が慣れているsubscribe()を使用することを好みます。

33
Günter Zöchbauer

Rx toPromise演算子をインポートする必要があります

import 'rxjs/add/operator/toPromise';

乾杯！

22
dheeran

Angular2ドキュメントから

rxjs-extension.tsに追加することをお勧めします

```
// Observable class extensions 
   import 'rxjs/add/observable/of'; 
   import 'rxjs/add/observable/throw';

// Observable operators 
   import 'rxjs/add/operator/catch'; 
   import 'rxjs/add/operator/debounceTime'; 
   import 'rxjs/add/operator/distinctUntilChanged'; 
   import 'rxjs/add/operator/do'; 
   import 'rxjs/add/operator/filter'; 
   import 'rxjs/add/operator/map'; 
   import 'rxjs/add/operator/switchMap'; 
```

app.module.ts（ルートモジュール）import './rxjs-extensions';にインポートします

これにより、それ以上のエラーを防ぐことができます。

2
YoongKang Lim