Angular中如何实现嵌套API调用并返回含内外响应属性的Observable数组

你提供的示例代码存在关键问题：在外层map操作符中返回内部Observable后，最终得到的是包含Observable的数组，而非合并后的数据数组。要实现需求，需借助RxJS的高阶映射操作符与合并操作符来处理嵌套流：

场景1：并行调用内层API（适合无依赖、追求性能的场景） #

用forkJoin并行发起所有内层请求，全部完成后返回合并后的数组：

queryThatReturnsArray().pipe(
  switchMap(outerArray => {
    // 为每个外层元素创建内层请求Observable，并映射合并属性
    const innerObservables = outerArray.map(outerItem => 
      anotherQuery(outerItem.id).pipe(
        map(innerRes => ({
          name: outerItem.name,
          prop2: innerRes.prop
        }))
      )
    );
    // 并行执行所有内层请求，返回合并后的数组Observable
    return forkJoin(innerObservables);
  })
);

场景2：顺序调用内层API（适合有调用顺序要求、避免并发过高的场景） #

用concat结合from按顺序发起请求，最后转为数组：

import { from, concat } from 'rxjs';
import { switchMap, map, toArray } from 'rxjs/operators';

queryThatReturnsArray().pipe(
  switchMap(outerArray => {
    const innerObservables = outerArray.map(outerItem => 
      anotherQuery(outerItem.id).pipe(
        map(innerRes => ({
          name: outerItem.name,
          prop2: innerRes.prop
        }))
      )
    );
    // 顺序执行所有内层请求，最终转为数组
    return concat(...innerObservables).pipe(toArray());
  })
);

关键细节 #

• switchMap：将外层API的数组响应转换为内层请求的合并流，若外层有新请求会取消未完成的内层请求；若不需要取消，可改用concatMap或mergeMap。
• 错误处理：若要避免单个内层请求失败导致整体流中断，可在每个内层Observable中添加catchError：

  const innerObservables = outerArray.map(outerItem => 
    anotherQuery(outerItem.id).pipe(
      map(innerRes => ({ name: outerItem.name, prop2: innerRes.prop })),
      catchError(err => {
        console.error(`请求${outerItem.id}失败:`, err);
        return of({ name: outerItem.name, prop2: null }); // 返回默认值保证流不中断
      })
    )
  );
  

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