Angular2 Observable和Promise

时间:2016-04-15 13:16:40

标签: angular promise rxjs observable

我开始使用Angular2 .then,但我找不到与Promises使用的public login() { this._user = AuthService.getInstance().login(this._loginInfo); } 类似的内容。

这就是我想要完成的事情。

来自header.component.ts的

代码

return this._httpClient.post('LoginAction', credentials)
  .map(res => res.json())
  .subscribe(user => {
    return new User(user);
  });
来自auth.service.ts的

代码

login

使用promises,component函数将返回Promise,最终将转换为来自服务器的实际响应。但是使用Observable这将无效。

有没有办法做类似的事情?我想避免在login的{​​{1}}函数中放置订阅。我希望能够在服务中完成所有工作,并将实际对象返回component

另外,我尝试使用Promise创建toPromise,但我不断获得toPromise is not a function

P.S。 _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做同样的事情是行不通的(或者我做错了)?

我看到返回的对象是Observable(在调用toPromise之前),但我确实没有看到toPromise函数。

3 个答案:

答案 0 :(得分:33)

当您致电subscribe(...)时,会返回Subscription,而toPromise()没有subscribe。如果您将代码从map移至toPromise(),则可以使用subscribe代替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(); }); } ,他可以使用

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

但如果省略`.toPromise()并且调用者像

那样使用它,你会得到相同的结果
subscribe()

唯一的区别是then()而不是subscribe(),如果图书馆的用户更喜欢反应型,他会更喜欢使用/* POST login page. */ router.post('/login', function(req, res, next) { passport.authenticate('local', { successRedirect: '/dashboard/users', failureRedirect: 'pages/login'}, function(err, user, info) { if(err) { console.log('') return res.render('pages/login', {title: 'Login', error: err.message}); } if(!user) { return res.render('pages/login', {title: 'Login', error: info.message}); } return req.logIn(user, function(err) { if(err) { return res.render('pages/login', {title: 'Login', error: err.message}); } else if (user.firstLogin) { return res.redirect('/change-password'); // <- First login } else { return res.redirect('/dashboard/users'); } }); })(req, res, next); }); ,就像他习惯的那样。

答案 1 :(得分:22)

您需要导入Rx toPromise运算符,如

import 'rxjs/add/operator/toPromise';

干杯!

答案 2 :(得分:2)

来自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';

这有助于我们防止进一步的错误。