Angular 5 HttpClient 在有值之前返回

Question

我开始使用 Angular，我有一个非常简单的问题。

我正在使用 this starter project that I created via the ngx-rocket tool, and I'm trying to implement the authentication using my webapi. I'm talking about this service (see original code).

作为 Http 模块，我使用的是新模块 (import { HttpClient } from '@angular/common/http';)。我将上面服务的 login 方法更改为：

  login(context: LoginContext): Observable<Credentials> {

    return  this._http.post<Credentials>("/api/account/login", 
      {Email : context.username,Password:context.password});        
  }

http 请求发生并且 returns 成功。我的问题：如您所见，我还应该使用 this.setCredentials(data, context.remember); 设置凭据。令我困惑的是如何 return observable 并以相同的方法设置凭据？我尝试将 returned 保持在一个变量中可观察，订阅它，设置数据然后 return 但它 returns 在设置数据之前（我知道它是异步的）。

这就是让我感到困惑的地方，它对 Angular 来说非常基础，但仍然让我感到困惑。如何更改此方法以提供正确的 return 并设置凭据？

感谢您的帮助

Answer 1

尝试使用 pipe

login(context: LoginContext): Observable<Credentials> {
    return this._http.post<Credentials>("/api/account/login", {Email : context.username,Password:context.password})
                .pipe(
                    tap(data => {
                        this.setCredentials(data, context.remember);
                    })
                );
}

Answer 2

您可以使用 lettable tap（以前的 do）运算符，并且仍然 return observable。

import { tap } from 'rxjs/operators/tap';

login(context: LoginContext): Observable<Credentials> {
    return this._http.post<Credentials>("/api/account/login", {Email : context.username,Password:context.password})
        .pipe(do((response) => {
          // this.setCredentials(data, context.remember);
        })
    );
}

该操作已被注释掉，因为我不确定您返回或想要传递的是什么。

如果您想根据 setCredentials 的操作 return 一些不同的东西，那么使用 map 和 return 方法中的一些东西。

Angular 5 HttpClient 在有值之前返回

Angular 5 HttpClient returning before having the value

angular

angular2-observables

angular5