Angular 使用 forJoin Rxjs 运算符组合和转换多个 http 请求

Question

我正在将多个 http 请求与 forkJoin rxjs 运算符结合起来。

fetchUsers() {
    const userIds = [1, 2, 3];
    const url = 'https://jsonplaceholder.typicode.com/users';

    forkJoin(userIds.map(id => this.http.get(`${url}/${id}`))).subscribe(
      console.log
    );
  }

所以，然后我订阅我得到三个对象，但我想改变这些对象并获得这样的结构

[{id:1, user: Object}, {id:2, user: Object}, {id:3, user:Object}];

我试过使用运算符，但我得到了

[{id:1, user: Observable}]

结构。这是我的 stackblitz link https://stackblitz.com/edit/angular-ivy-uikppg?file=src%2Fapp%2Fapp.component.ts。谢谢

Answer 1

您应该使用 rxjs map 运算符来转换数据，而不是在 forkJoin

中使用运算符

    fetchUsers() {
        const userIds = [1, 2, 3];
        const url = 'https://jsonplaceholder.typicode.com/users';
    
        forkJoin(
          userIds.map(id => this.http.get(`${url}/${id}`).pipe((map(user=>({
            id,user
          })))))
        ).subscribe(console.log);
      }

Forked Example

Angular 使用 forJoin Rxjs 运算符组合和转换多个 http 请求

Angular combine and transform multiple http requests with forJoin Rxjs operator

operators

fork-join

rxjs

angular