Angular的concatMap中使用forEach发起HTTP请求报错如何解决？

错误根因 #

1. concatMap 要求回调必须返回Observable、Promise、数组这类可被RxJS识别的流结构，你当前代码里使用Array.forEach遍历，而forEach的返回值是undefined，不符合concatMap的参数要求，所以直接触发类型错误。
2. 你在concatMap内部手动调用了.subscribe()，属于多余的嵌套订阅。concatMap这类高阶映射操作符会自动订阅内部返回的流，不需要手动处理订阅。
3. 你要实现按顺序发起多个POST请求的需求，没有把单个请求的Observable组合成串行流，逻辑链条断裂。

修复步骤 #

1. 把遍历用的forEach替换为map，将FormArray的每一项值直接转换为对应的POST请求Observable，得到一个Observable数组。
2. 使用RxJS内置的concat操作符组合这个Observable数组，保证所有请求严格按顺序执行，前一个请求完成后才会发起下一个。
3. 移除内部的手动订阅，统一在下游处理请求返回结果即可。

修正后代码 #

首先导入依赖：

import { concat } from 'rxjs';

替换原有concatMap段：

concatMap(() => {
  // 遍历FormArray值，生成对应POST请求Observable数组
  const postRequests = this.incentiveRecurringEntryForm.controls['entryRowsRecurring'].value.map(r => {
    const updateRecurringWithJobID = addToObject(r, 'IncentiveID', this.job_id);
    console.log(updateRecurringWithJobID);
    // 直接返回请求Observable，不要手动subscribe
    return this.routeService.postIncentive_Add_Recurring(updateRecurringWithJobID);
  })
  // 按顺序串行执行所有请求
  return concat(...postRequests);
}),
// 可在此处统一处理每个请求的返回结果
tap(res => console.log(res))

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