Angular中使用RxJS forkJoin合并多个HTTP请求并转换响应结构

你可以通过两种常见方式实现需求，核心是使用RxJS的map操作符处理流发射的值，而非of操作符（of会将传入值包装为新的Observable，因此会出现你遇到的user为Observable的问题）。

方案1：单个请求提前转换（推荐） #

在每个HTTP请求的流中就完成结构拼接，forkJoin最终返回的数组就是符合要求的结构：

// 需提前从rxjs/operators导入map操作符
import { map } from 'rxjs/operators';

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(
    res => console.log(res) // 输出就是你需要的[{id:1, user:对象}, ...]结构
  );
}

方案2：所有请求返回后统一转换 #

利用forkJoin返回结果的顺序和传入Observable顺序完全一致的特性，拿到全部结果后和原ID数组做匹配转换：

import { map } from 'rxjs/operators';

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

  forkJoin(userIds.map(id => this.http.get(`${url}/${id}`))).pipe(
    map(users => 
      // 按顺序匹配ID和用户对象
      users.map((user, index) => ({ id: userIds[index], user }))
    )
  ).subscribe(
    res => console.log(res)
  );
}

内容的提问来源于stack exchange，提问作者zana10