如何从 angular observable 获取值？

Question

我有这样的 http 响应：

{
  version: "",
  result: {
   pageInfo: {...},
     data: []
  }
}

所以我使用 angular 服务收到此响应。并在组件中使用此服务。

export class UserComponent implements OnInit {
    users$: Observable<User[]>;
    pageInfo$: Observable<PageInfo>;
    
    constructor(private userService: UserService) { }
    
      ngOnInit() {
    
        this.users$ = this.userService.getUsers().pipe(
          /// how to map response for users$ and pageInfo$ ???
          // response.data will be in users$
          // response.pageInfo will be in pageInfo$
        );
    
    }
    
}

但我无法映射两个不同的可观察响应。有什么实用的解决方案吗？

Answer 1

这样做。请注意share-Operator，否则请求将发送两次。

export class UserComponent implements OnInit {

  users$: Observable<User[]>;
  pageInfo$: Observable<PageInfo>;

  constructor(private userService: UserService) { }

  ngOnInit() {
    const result$ = this.userService.getUsers().pipe(
      map(response => response.result),
      share();
    );
    this.users$ = result$.pipe(
      map(result => result.data),
    );
    this.pageInfo$ = result$.pipe(
      map(result => result.pageInfo),
    );
  }
}

Answer 2

考虑应用 shareReplay 运算符（与 share 运算符不同，其中 this.userService.getUsers() 返回的 Observable 将在第一个 Observable 完成后被订阅时重新订阅，导致进一步的 HTTP 请求，使用 shareReplay 允许访问以前发出的值）如下所示：

users$: Observable<User[]>;
pageInfo$: Observable<PageInfo>;

constructor(private userService: UserService) { }

ngOnInit() {
  const shared$ = this.userService.getUsers()
    .pipe(
      map(({ result }) => result),
      shareReplay(1)
    );

  this.users$ = shared$.pipe(map(({ data }) => data));
  this.pageInfo$ = shared$.pipe(map((pageInfo) => pageInfo));
}

Answer 3

像这样使用 ES6 Destructuring 功能：

Component.ts


this.userService.getUsers().subscribe((res) => {
  let { version, result } = res;
});

有关 Destructring 的更多信息，请访问 this link。

如何从 angular observable 获取值？

How to get values from angular observable?

rxjs

angular

angular8

rxjs-observables