首页 文章

Angular2 Observable和Promise

提问于
浏览
35

我开始使用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);
  });

使用promises, login 函数将返回Promise,最终将转换为来自服务器的实际响应 . 但是使用Observable这不起作用 .

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

另外,我尝试使用 toPromise 创建 Promise ,但我一直在获得 toPromise is not a function .

附: _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);
});

通过这样做,我的组件将获得对象(这是它需要的),并且在服务中我可以做更多的事情(比如一旦我登录他就将用户保存到localstorage) .

我切换到了 Promise ,因为对 Observable 做同样没有用(或者我做错了)?

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

3 回答

  • 22

    当你调用 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() ,就像他习惯的那样 .

  • 33

    您需要导入Rx toPromise运算符

    import 'rxjs/add/operator/toPromise';
    

    干杯!

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

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

相关问题