Angular2 可观察和承诺

Question

我开始使用 Angular2 Observable，但我找不到与我在 Promises 中使用的 .then 类似的东西。

这就是我想要完成的。

代码来自 header.component.ts

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

代码来自 auth.service.ts

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

有了承诺，login 函数将 return 承诺，最终将转换为服务器的实际响应。但是对于 Observable 这将不起作用。

有没有办法做类似的事情？我想避免将订阅放入 component 的 login 函数中。我希望能够完成服务中的所有工作，并return实际object到component。

此外，我尝试用 toPromise 创建 Promise，但我总是得到 toPromise is not a function。

p.s。 _httpClient 是我围绕 angular2 http 的包装器，我在其中通过添加一些 headers 等来准备请求

编辑

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

通过这样做，我的组件将获得 object（这是它所需要的），并且在服务中我可以做其他事情（比如将用户保存到本地存储，一旦我登录他）。

然后我切换到 Promise，因为对 Observable 做同样的事情不起作用（或者我做错了）？

我看到 returned object 是 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();
    });
}

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

一样使用它，您会得到相同的结果

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

唯一的区别是 subscribe() 而不是 then()，如果库的用户更喜欢反应式风格，他会更喜欢使用 subscribe()，就像他习惯的那样。

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

这将帮助我们防止进一步的错误。

Angular2 可观察和承诺

Angular2 Observable and Promise

promise

observable

rxjs

angular

代码来自 header.component.ts

代码来自 auth.service.ts

编辑