webentwicklung-frage-antwort-db.com.de

Angular2 Observable and Promise

Ich habe angefangen, Angular2 Observable zu verwenden, aber ich kann nicht etwas Ähnliches wie .then Finden, das ich mit Promises verwendet habe.

Das möchte ich erreichen.

code aus header.component.ts

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

code von auth.service.ts

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

Mit Versprechungen würde die Funktion login Versprechen zurückgeben, das sich schließlich in eine tatsächliche Antwort vom Server verwandeln würde. Aber mit Observable wird das nicht funktionieren.

Gibt es eine Möglichkeit, Ähnliches zu tun? Ich möchte vermeiden, dass ich subscribe in die component - Funktion von login einfügen muss. Ich möchte in der Lage sein, die gesamte Arbeit im Dienst zu erledigen und das tatsächliche Objekt an component zurückzugeben.

Außerdem habe ich versucht, Promise mit toPromise zu erstellen, aber ich erhalte immer wieder toPromise is not a function.

p.s. _httpClient ist mein Wrapper um angle2 http, in dem ich die Anforderung vorbereite, indem ich einige Header usw. hinzufüge.

bearbeiten

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);
});

auf diese Weise erhält meine Komponente ein Objekt (das ist das, was sie benötigt), und im Betrieb kann ich zusätzliche Dinge tun (wie das Speichern des Benutzers in localstorage, sobald ich ihn angemeldet habe).

Und ich habe zu Promise gewechselt, weil das gleiche mit Observable nicht funktioniert (oder ich mache es falsch)?

Ich sehe, dass das zurückgegebene Objekt Observable ist (vor dem Aufruf von toPromise), aber ich sehe die Funktion toPromise in der Tat nicht.

angularpromiserxjsobservable
35
Ned

Wenn Sie subscribe(...) aufrufen, wird ein Subscription zurückgegeben, das keine toPromise() enthält. Wenn Sie den Code von subscribe nach map verschieben, können Sie toPromise() anstelle von subscribe verwenden.

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

und der Aufrufer erhält ein Promise, mit dem er den Wert abrufen kann

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

sie erhalten jedoch das gleiche Ergebnis, wenn Sie `.toPromise () weglassen und der Aufrufer es wie folgt verwendet

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

wo der einzige Unterschied ist subscribe() anstelle von then() und wenn der Benutzer der Bibliothek den reaktiven Stil bevorzugt, wird er es vorziehen, subscribe() zu verwenden, wie er es gewohnt ist.

33
Günter Zöchbauer

Sie müssen den Rx toPromise-Operator wie importieren

import 'rxjs/add/operator/toPromise';

Prost!

22
dheeran

Aus der Angular2-Dokumentation

Wir empfehlen, dies in 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'; 
```

Und importiere es bei app.module.ts (Root-Modul) import './rxjs-extensions';

Dies hilft uns, weitere Fehler zu vermeiden.

2
YoongKang Lim