Angular2 Observable和Promise

Question

我开始使用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函数。

Answer 1

当您致电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); }); ，就像他习惯的那样。

Answer 2

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

import 'rxjs/add/operator/toPromise';

干杯！

Answer 3

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

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