Angular2 Observables et la Promesse

Question

J'ai commencé à utiliser Angular2 Observable, mais je ne peux pas trouver quelque chose de similaire .then que j'ai utilisé avec Promises.

C'est ce que je veux accomplir.

code d'en-tête.composante.ts

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

code d'auth.service.ts

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

Avec des promesses, login fonction serait de retour la Promesse, qui a fini par transformer de réelle réponse du serveur. Mais avec Observables cela ne fonctionnera pas.

Est-il un moyen de faire la même chose? Je veux éviter la nécessité de mettre abonnez-vous à l'intérieur d' components' login fonction. Je veux être en mesure de faire tout le travail dans les services et de retour de l'objet réel à l' 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 de angular2 http dans lequel je demande de préparation 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 obtiendrez objet (qui est ce qu'il faut), et dans le service que je pouvais faire des choses (comme l'enregistrement de l'utilisateur pour localstorage, une fois que j'ai connecté lui).

Et je suis passé à l' Promise, car faire de même avec Observable ne fonctionne pas (ou je me suis fais mal)?

Je vois que l'objet retourné est Observable (avant d'appeler toPromise), mais je ne vois pas toPromise fonctionnent bel et bien.

Answer 1

Lorsque vous appelez subscribe(...) un Subscription est retourné qui n'ont pas d' toPromise(). Si vous déplacez le code de l' subscribe de 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 d'obtenir un Promise où il peut obtenir la valeur à l'aide

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 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 réactif de style, il préférera l'aide d' subscribe() comme il est utilisé pour.

Answer 2

Vous devez importer le Rx toPromise opérateur comme

import 'rxjs/add/operator/toPromise';

Cheers!

Answer 3

De Angular2 documentation

Nous conseillons d'ajouter cette en 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 les importer dans app.module.ts (Racine de Module) import './rxjs-extensions';

Cela nous aidera à prévenir d'autres erreurs.