Angular2 Observable et promesse
J'ai commencé à utiliser Angular2 Observable, mais je ne trouve pas quelque chose de similaire à .then que j'ai utilisé avec Promises.
C'est ce que je veux accomplir.
Code de l'en-tête.composant.ts
public login() {
this._user = AuthService.getInstance().login(this._loginInfo);
}
Code de auth.service.ts
return this._httpClient.post('LoginAction', credentials)
.map(res => res.json())
.subscribe(user => {
return new User(user);
});
Avec promises, la fonction login retournerait Promise, qui finirait par se transformer en réponse réelle du serveur. Mais avec Observable cela ne fonctionnera pas.
Est-il un moyen de faire la même chose? Je veux éviter le besoin de mettre subscribe dans la fonction login de component. Je veux être capable de faire tout le travail en service, et de retourner l'objet réel à component.
Aussi, j'ai essayé de créer Promise, avec toPromise, mais je reçois toPromise is not a function.
P. S. _httpClient est mon wrapper autour du http angular2 dans lequel je prépare la requête en ajoutant des en-têtes, etc.
Modifier
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);
});
En faisant cela, mon composant obtiendra l'objet (ce dont il a besoin), et en service je pourrais faire des choses supplémentaires (comme enregistrement de l'utilisateur à localstorage, une fois que je l'ai connecté).
Et je suis passé à Promise, parce que faire de même avec Observable ne fonctionne pas (ou je le fais mal)?
Je vois que l'objet retourné est Observable (avant d'appeler toPromise), mais je ne vois pas la fonction toPromise en effet.
3 réponses
Lorsque vous appelez subscribe(...) un Subscription est retourné qui n'ont pas de toPromise(). Si vous déplacez le code de subscribe à map, vous pouvez utiliser toPromise() au lieu de subscribe
return this._httpClient.post('LoginAction', credentials)
.map(res => res.json())
.map(user => {
return new User(user);
}).toPromise();
Et l'appelant obtiendra un Promise où il peut obtenir la valeur en utilisant
public login() {
this._user = AuthService.getInstance().login(this._loginInfo)
.then(result => {
doSomething();
});
}
, Mais vous obtenez le même résultat si vous omettez `.toPromise () et l'appelant l'utilise comme
public login() {
this._user = AuthService.getInstance().login(this._loginInfo)
.subscribe(result => {
doSomething();
});
}
Où la seule différence est subscribe() au lieu de then() et si l'utilisateur de la bibliothèque préfère le style réactif, il préférera utiliser subscribe() comme il est habitué.
Vous devez importer L'opérateur RX toPromise comme
import 'rxjs/add/operator/toPromise';
Cheers!
De la documentation Angular2
Nous conseillons d'ajouter 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';
```
Et l'importer à app.module.ts (Module racine)
import './rxjs-extensions';
Cela nous aidera à éviter d'autres erreurs.