学习 RXJS 管道和映射

Question

尝试使用管道和地图的其他示例后，我被卡住了：我的代码：

 this.http.post(this.baseUrl + 'account/login', dto)
  .pipe(
    map(val => {
    return new UserAuthenticatedDto;
    {
      var username = val.username;
      var token = val.token;
      var roles = val.roleslist;
      var knownAs = val.knownAs;
      this.toastr.success("Logged In Successfully", "", { positionClass: 'toast-bottom-right' });
      this.route.navigateByUrl('/splashPagePost');
    }
  }));

首先，我不知道我是否可以在地图中调用 toastr、navigateByUrl 等类型的函数（它应该在地图之后——我认为 RXJS 运算符没有办法执行这些函数）？

它找不到用户名、令牌等。这让我觉得这些应该显示在 JSON 结果中？ UserAuthenticatedDto 确实有这 4 个字段。这并不难，但我尝试模仿现有代码，但它就是行不通。

因此两者都无法访问且未定义。我试过 map( val : UserAuthentcatedDto => ... 运气不好

想法？提前致谢

Answer 1

您的代码有很多问题。根据您整理的内容，我只能帮助您了解一点语法。

因此，当您 map 时，您正在将您的回复更改为您喜欢的格式。在 map 中，您不会显示 toast 通知或进行任何类型的路由。

在 subscribe 中，您可以从 observable 获得映射数据（在您的示例中，响应从服务器返回的 post 请求）。

您通常会在订阅中处理 toast 通知和路由。

    this.httpClient.post<UserAuthenticatedDto>
        (urlExtension + 'account/login', dto)
        .pipe(map((response : PutTheTypeOfResponseHere) => ({
                  username: response.username,
                  token: response.token,
                  roles: response.roles,
                  knownAs: response.knownAs,
    })))
    .subscribe(value => {
           this.toastr.success("Logged In Successfully", "", { 
                  positionClass: 'toast-bottom-right' });
           this.route.navigateByUrl('/splashPagePost');
     })

学习 RXJS 管道和映射

Learning RXJS pipe and map

pipe

rxjs

angular