Angular 地图问题？

我有一个登录方法，需要在移动到下一页之前进行两次调用。第一个方法调用登录api并返回令牌。我正在将此令牌保存到localStorage并从标头拦截器获取。第二次呼叫返回用户名和显示名称，完成两次呼叫后，我将用户路由到登录页面

我认为两个调用ExhusMap的最佳解决方案，但我以前没有使用过，我不知道如何在exausm map中合并这两个方法。如果有人能写出语法的话

提前谢谢

这是我的方法：

login(type: string, email: string, password: string): Observable<any> {
        this.url = '';
        const reqUrl = `${environment.api_url}${'users/logins'}`;
        this.url = `${reqUrl}`;

        return this.post(
            {
                type,
                profile: { email, password },
            }).pipe(
                catchError(this.errorHandlerService.handleError),
                tap(response => {
                    console.log('1', response);
                    this.storageService.saveToken(response.accessToken);
                }));

        this.userService.getUserInfo()
            .pipe(
                catchError(this.errorHandlerService.handleError),
                tap(response => {
                    this.handleAuthentication(
                        response.email,
                        response.displayName
                    );
                    console.log('2', response.displayName);
                })
            );
    }

    private handleAuthentication(email: string, displayName: string): void {
        const user = new User(email, displayName);
        this.user.next(user);
        this.storageService.saveUser(user);
    }

login（类型：string，电子邮件：string，密码：string）：可观察{
this.url=''；
const reqUrl=`${environment.api_url}${'users/logins'}`；
this.url=`${reqUrl}`；
把这个寄回来(
{
类型，
个人资料：{电子邮件，密码}，
}).烟斗(
catchError（this.errorHandlerService.handleError），
点击（响应=>{
console.log（'1'，响应）；
this.storageService.saveToken（response.accessToken）；
}));
this.userService.getUserInfo（）
.烟斗(
catchError（this.errorHandlerService.handleError），
点击（响应=>{
这是一个手工验证(
response.email，
response.displayName
);
console.log（'2'，response.displayName）；
})
);
}
私有handleAuthentication（电子邮件：string，显示名称：string）：无效{
const user=新用户（电子邮件、显示名称）；
this.user.next（用户）；
this.storageService.saveUser（用户）；
}

观测值的伟大之处在于，您可以将它们链接到一个流体动作中：

  login(type: string, email: string, password: string): Observable<any> {
    const reqUrl = `${environment.api_url}${'users/logins'}`;
    this.url = `${reqUrl}`;

    const profile = { email, password };
    return this.post({ type, profile }).pipe(
      exhaustMap(response => {
        console.log('1', response);
        this.storageService.saveToken(response.accessToken);

        return this.userService.getUserInfo().pipe(
          tap(response => {
            this.handleAuthentication(
              response.email,
              response.displayName
            );
            console.log('2', response.displayName);
          })
        )
      }),
      catchError(this.errorHandlerService.handleError),
    );

  }

login（类型：string，电子邮件：string，密码：string）：可观察{
const reqUrl=`${environment.api_url}${'users/logins'}`；
this.url=`${reqUrl}`；
const profile={email，password}；
返回此.post（{type，profile}）.pipe(
排气图（响应=>{
console.log（'1'，响应）；
this.storageService.saveToken（response.accessToken）；
返回此.userService.getUserInfo（）管道(
点击（响应=>{
这是一个手工验证(
response.email，
response.displayName
);
console.log（'2'，response.displayName）；
})
)
}),
catchError（this.errorHandlerService.handleError），
);
}

这里我们调用post，它可能使用Angular的HttpClient的

post

，它返回一个可观察的，并以响应完成。然后我们使用

defaustmap

将http调用的源可观察对象投影到另一个调用。我们也可以在这里使用

switchMap

，但defaustmap确保第一篇文章完成

---

请注意，如果

此.post

未完成，exhaustMap将阻止其排放。

谢谢man@inorganik，它工作完美，在这种情况下，您更喜欢使用exhaustMap还是制作相同的其他解决方案？很高兴听到！如果您不想因为启动了另一个http请求而取消任何http请求，请使用exhaustMap，就像用户正在快速点击按钮一样。这是带T的排气图：）