如何从可观察角度获取值？

问题描述

我有这样的http响应：

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

因此，我正在使用角度服务获得此响应。并在组件中使用此服务。

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$
        );
    
    }
    
}

但是我无法映射两个可观察到的响应。有什么可行的解决方案吗？

解决方法

执行此操作。请注意共享操作符，否则请求将发送两次。

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),);
  }
}

,

请考虑应用shareReplay运算符（与share运算符不同，在其中一个Observable的第一个已完成订阅之后，this.userService.getUsers()返回的Observable将被重新订阅）请求，使用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));
}

,

像这样使用ES6 Destructuring 功能：

Component.ts

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

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