TypeScript与Angular中动态Observable列表构建及执行方案问询

Promise.all未触发请求的核心原因有两个：

• RxJS冷Observable默认不会自动执行，只有调用.subscribe()完成订阅后，才会真正发起请求、推送返回值
• Promise.all仅支持接收Promise实例，直接传入Observable不会触发自动订阅和类型转换，不会产生任何执行效果

用RxJS内置的forkJoin操作符即可完全匹配需求：它接收一组同类型Observable，并行执行所有流，等所有流全部完成后，按传入顺序把所有结果拼接成数组返回，只会触发一次后续逻辑。

1. 先导入依赖

import { forkJoin } from 'rxjs';

2. 直接替换原有Promise.all逻辑即可

forkJoin(tasks).subscribe({
  next: (userList: User[]) => {
    // 此处拿到的userList就是按tasks顺序排列的所有用户信息数组，所有请求完成后才会执行
    console.warn(userList);
    // 后续业务逻辑直接写在这里
  },
  error: (err) => {
    // 任意一个请求报错就会进入该回调，终止整个流程
    console.error('用户信息拉取失败', err);
  }
});

补充：如果不希望单个请求失败打断整个流程，可以给每个task加上catchError操作符返回兜底的默认用户值，就能保证所有请求结果都能正常返回。

如果项目后续逻辑全是Promise写法，不想用subscribe，可以先把单个Observable转成Promise再调用Promise.all。HTTP请求返回的Observable只会返回一次结果就结束，用firstValueFrom转换即可：

1. 导入转换方法

import { firstValueFrom } from 'rxjs';

2. 代码实现

const taskPromises = tasks.map(task => firstValueFrom(task));
Promise.all(taskPromises).then(userList => {
  console.warn(userList);
  // 后续逻辑
}).catch(err => {
  console.error('拉取失败', err);
});

当前组装tasks数组的逻辑可以简化，不需要提前声明空数组再循环push，直接通过map生成即可：

const tasks: Observable<User>[] = uniqueUserIds.map(userId => this.getUserInfo(userId));

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