如何用RxJS实现列表项Observable并行执行并规避嵌套subscribe

重构方案 #

你可以使用 mergeMap + merge 组合来实现需求，既避免嵌套订阅，也能准确捕获所有请求完成的时机：

// 展示加载指示器
this.loading = true;

this.getNumbers().pipe(
  mergeMap((nums: number[]) => {
    // 为每个数字生成对应的getData请求Observable
    const dataRequests = nums.map(num => this.myService.getData(num));
    // 合并所有请求，并行触发
    return merge(...dataRequests);
  })
).subscribe({
  next: (response: Data) => {
    // 单个请求完成后执行原有逻辑，行为和你之前的实现完全一致
    this.rows.push(response);
  },
  complete: () => {
    // 所有请求全部完成，隐藏加载指示器
    this.loading = false;
  },
  error: (err) => {
    // 全局错误处理，请求异常时也关闭加载避免卡死
    this.loading = false;
    console.error('请求执行异常:', err);
  }
})

特性说明 #

• 所有getData请求会并行触发，不需要等待前一个请求返回，符合你的要求
• 每个请求返回结果后会立刻触发next回调，和你原有嵌套订阅的执行逻辑完全一致
• 没有嵌套订阅问题，符合RxJS的最佳实践
• 所有请求执行完毕后会自动触发complete回调，你可以在这里统一处理加载状态隐藏的逻辑

如果需要容忍单个getData请求失败不中断整体流，可以给每个请求单独添加错误处理：

import { EMPTY, catchError } from 'rxjs';

// mergeMap内的逻辑调整为
const dataRequests = nums.map(num => 
  this.myService.getData(num).pipe(
    catchError(err => {
      console.error(`获取数字${num}对应数据失败:`, err);
      // 返回EMPTY表示当前请求出错后不输出任何值，继续执行其他请求
      return EMPTY;
    })
  )
);

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