Angular中forkJoin与mergeMap调用3个API丢失第二个响应的问题

你的问题出在response2的管道处理上：用mergeMap之后，原本第二个API的响应被转换成了第三个API的请求，所以forkJoin里的response2最终只返回第三个API的结果，第二个API的响应自然丢失了。要拿到三个API的完整响应，需要在mergeMap里同时保留第二个和第三个API的结果。

修改方案 #

调整response2的管道逻辑，在请求完第三个API后，把第二个API的结果和第三个的结果一起返回，最后在forkJoin订阅时解构出三个响应并整理成数组：

fetchAllData() {
  let inp = this.input_row;

  // 第一个独立API请求
  let response1 = this.service.callMethod('rate_plan', { 
    companyId: inp.cpnyId, 
    servAbbr: inp.servAbbr, 
    productNumber: inp.prdctNo, 
    orgNumber: inp.orgNo, 
    rateCategory: inp.rateCat, 
    ratePlanNumber: inp.ratePlanNo 
  });

  // 第二个API + 依赖它的第三个API，同时保留两个响应
  let response2And3 = this.service.callMethod('approve_rate', { 
    prodctNo: inp.prdctNo, 
    servAbbr: inp.servAbbr, 
    companyId: inp.cpnyId, 
    ratePlanNo: inp.ratePlanNo 
  }).pipe(
    map(item => {
      this.approveRate = item;
      return item[0]; // 提取后续请求需要的appRate数据
    }),
    mergeMap(appRate => 
      // 请求第三个API后，把第二个和第三个的响应打包返回
      this.service.callMethod('rate_detail', { 
        companyId: inp.cpnyId, 
        ratePlanNo: inp.ratePlanNo, 
        rateCaseGrpngNo: appRate['rateCaseGrpngNo'] 
      }).pipe(
        map(rateDetail => ({ approveRate, rateDetail }))
      )
    )
  );

  forkJoin([response1, response2And3]).subscribe(([ratePlan, combinedData]) => {
    // 整理成包含三个独立对象的数组
    const allResponses = [ratePlan, combinedData.approveRate, combinedData.rateDetail];
    console.log(allResponses);
    // 这里可以把allResponses存入你需要的数组变量中
  });
}

逻辑说明 #

1. response2And3先请求第二个API，拿到结果后提取出后续请求需要的appRate数据
2. 通过mergeMap发起第三个API请求，并用map把第二个API的appRate和第三个API的rateDetail打包成一个对象返回
3. forkJoin订阅时，解构出第一个API的响应，以及第二个+第三个的组合数据，最后整理成包含三个独立对象的数组

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