Angular2 Observable and Promise

I started using Angular2 Observable, but I can’t find something similar to .then that I used with Promises.

This is what I want to accomplish.

code from header.component.ts

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

code from auth.service.ts

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

With promises, login function would return Promise, that would eventually transform to actual response from server. But with Observable this won’t work.

Is there a way to do similar thing? I want to avoid need of putting subscribe inside component‘s login function. I want to be able to do all the work in service, and to return actual object to component.

Also, I tried to create Promise, with toPromise, but I keep getting toPromise is not a function.

p.s. _httpClient is my wrapper around angular2 http in which I prepare request by adding some headers etc.

edit

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

by doing this, my component will get object (which is what it need), and in service i could do additional things (like saving user to localstorage, once I logged him).

And I switched to Promise, because doing same with Observable is not working (or I am doing it wrong)?

I see that returned object is Observable (before calling toPromise), but I don’t see toPromise function indeed.

3
Leave a Reply

avatar
3 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

When you call subscribe(...) a Subscription is returned which doesn’t have a toPromise(). If you move the code from subscribe to map you can use toPromise() instead of subscribe return this._httpClient.post('LoginAction', credentials) .map(res => res.json()) .map(user => { return new User(user); }).toPromise(); and the caller will get a Promise where he can get the value using public login() { this._user = AuthService.getInstance().login(this._loginInfo) .then(result => { doSomething(); }); } but you get the same result if you omit `.toPromise() and the caller uses it like public login() { this._user = AuthService.getInstance().login(this._loginInfo) .subscribe(result => { doSomething(); }); } where the only difference… Read more »

Jason
Guest

You need to import the Rx toPromise operator like

import 'rxjs/add/operator/toPromise';

Cheers!

Jason
Guest

From Angular2 documentation

We are advise to add this 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'; 
```

And import it at app.module.ts (Root Module)

import './rxjs-extensions';

This will help us to prevent further error.