Angular使用RxJS concatMap拼接多个Observable结果报语法错如何修复

你的代码存在5个核心问题，直接导致语法报错和逻辑失效：

1. concatMap要求传入的回调函数必须返回一个合法的ObservableInput（通常是Observable），你的回调函数没有返回值，默认返回undefined，和类型要求不匹配，这就是你看到的类型报错的直接原因。
2. JavaScript/TypeScript数组追加元素的方法是push()，add()是Set、DOMTokenList等结构的方法，数组调用add()会直接抛出运行时错误。
3. pipe()方法接收的多个操作符参数之间必须用逗号分隔，你写的多个concatMap之间没有加逗号，属于基础语法错误。
4. 你当前的实现是同步返回issuesList变量，但HTTP请求是异步执行的，执行return语句时所有接口都还没返回，最终拿到的永远是空数组，方法本身应该返回Observable，由调用方通过订阅拿到最终异步结果。
5. 接口调用顺序逻辑写乱：第一个concatMap拿到tasks结果后你写的是调用sprints接口，但第二个concatMap拿到sprints结果后又重复调用了sprints接口，后续epics、stories的调用顺序完全错位。

嵌套concatMap写法（和你最初的思路完全一致） #

// 注意方法返回值是Observable，不要直接同步返回空数组
listProjectWithConcatMap(projectId: number): Observable<any[]> {
  return this.listProjectTasks(projectId).pipe(
    concatMap((resTasks) => {
      // 初始化结果集，存入第一个接口返回的tasks数据
      const issuesList = [...resTasks.body];
      // 必须return下一个要执行的接口Observable
      return this.listProjectSprints(projectId).pipe(
        concatMap((resSprints) => {
          issuesList.push(...resSprints.body);
          return this.listProjectEpics(projectId);
        }),
        concatMap((resEpics) => {
          issuesList.push(...resEpics.body);
          return this.listProjectStories(projectId);
        }),
        // 最后一个接口返回后，拼完数据返回最终结果
        map((resStories) => {
          issuesList.push(...resStories.body);
          return issuesList;
        })
      );
    })
  );
}

扁平化写法（逻辑更简洁，无嵌套） #

如果觉得嵌套写法可读性差，可以直接用concat操作符按顺序执行所有请求，再通过reduce聚合结果，效果完全一致：

import { concat } from 'rxjs';
import { reduce } from 'rxjs/operators';

listProjectWithConcatMap(projectId: number): Observable<any[]> {
  // 按执行顺序排列所有接口请求
  const requestQueue = [
    this.listProjectTasks(projectId),
    this.listProjectSprints(projectId),
    this.listProjectEpics(projectId),
    this.listProjectStories(projectId)
  ];

  return concat(...requestQueue).pipe(
    // 遍历所有接口返回值，聚合到结果数组
    reduce((finalList, currentResponse) => {
      finalList.push(...currentResponse.body);
      return finalList;
    }, [] as any[])
  );
}

方法返回Observable后，你需要在业务代码中订阅才能拿到最终的合并结果：

// 调用示例
this.yourService.listProjectWithConcatMap(targetProjectId).subscribe((allIssues) => {
  // 所有接口按顺序执行完成后，会进入这个回调，allIssues就是合并后的全量数据
  console.log('合并后的全量项目数据：', allIssues);
  // 在这里写后续业务逻辑即可
});

注意：使用前请确保已经从rxjs和rxjs/operators导入了所需的concatMap、map、concat、reduce操作符。

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