从 forkJoin 的结果数组进行 API 调用（使用 mergeMap）时出错，需要 Angular 中的 combinedResult

Question

目前我正在拨打 3 个不同的 API 电话，如下所示：-

//API Call1
getUserById(id){
return this.http
      .get(`${environment.userAPI}/user/${Id}`, { headers: this.headers })
      .pipe(
        catchError(err => {
          return throwError(this.errorHandler.handleError(err));
        }),
      );
}
//API Call 2:-
getTeamById(id){
return this.http
      .get(`${environment.TEAM_API}/team/${Id}`, { headers: this.headers })
      .pipe(
        catchError(err => {
          return throwError(this.errorHandler.handleError(err));
        }),
      );
};
////API Call 3:-
getGroupById(id){
return this.http
      .get(`${environment.GROUP_API}/group/${Id}`, { headers: this.headers })
      .pipe(
        catchError(err => {
          return throwError(this.errorHandler.handleError(err));
        }),
      );
};

//Now I am making all the Three API calls at once using forkJoin in the below way:-
forkJoin([getUserById(1), getTeamById(1),getGroupById(1)]).pipe(
      catchError(this.getCatchError)
    )
.subscribe([res1,res2,res3]=>{
  console.log(res1,res2,res3)
})

现在我有一个要求，我需要使用 res1 检查一个条件并进行另一个 API 调用并结合以上 3 个结果，我的条件是 API 调用 1 当我们获取用户详细信息我需要检查一个包含一个 ID 的现场团队负责人，并根据该 ID 我需要进行另一个 API 调用，如下所示：-

////API Call 3:-
getLeaderById(id){
return this.http
      .get(`${environment.Leader_API}/leader/${Id}`, { headers: this.headers })
      .pipe(
        catchError(err => {
          return throwError(this.errorHandler.handleError(err));
        }),
      );
};

我正在通过以下方式实现上述要求：-

forkJoin([getUserById(1), getTeamById(1),getGroupById(1)]).pipe(
      catchError(this.getCatchError)
    )
.pipe(
mergeMap(res => 
if(res[0]?.teamLeaderId){
   return getLeaderById(res[0]?.teamLeaderId).//Here I am getting res as undefined
} else{
  return res;
}
)
)
.subscribe([res1,res2,res3,res4]=>{
  console.log(res1,res2,res3,res4);//I am never ever reaching this line of code
})

我做错了吗？到最后，当所有 API 调用完成时，我需要有 3 个结果作为强制性结果，第 4 个结果根据条件是可选的。我是 RXJS 的新手。 注：- 我在 Angular9 中使用上面的代码使用打字稿

Answer 1

这里的问题很可能出现在 mergeMap 的响应中，合并映射所做的事情是 return 每次源发出时向源可观察到一个值。在您使用 forkJoin 运算符的情况下，源可观察对象仅发出一次，因此您将在 mergeMap 中只执行一次，并且作为 mergeMap 中的输入参数，您将拥有 3 的数组来自 forkJoin.

的回复

之后，当你进入 if/else 块时，有两个选项：

1 如果res[0]?.teamLeaderId == true 我们将 return 新的可观察对象，即第 4 个请求，在订阅中您将仅收到第 4 个请求的响应 2 如果 res[0]?.teamLeaderId == false 你将 return res 这不是可观察的，因此源流将中断并抛出错误。

这是一个有效的 Stackblitz 可以解决您的 switchMap 和 combineLatest

import { combineLatest, forkJoin, of } from "rxjs";
import { delay, switchMap } from "rxjs/operators";

const observable1 = of(1).pipe(delay(1000));
const observable2 = of(2).pipe(delay(1000));
const observable3 = of(3).pipe(delay(1000));
const observable4 = of(4).pipe(delay(1000));

const condition = true;

const observablen = forkJoin([observable1, observable2, observable3]);
observablen
  .pipe(
    switchMap(x =>
      combineLatest([...x.map(o => of(o)), ...(condition ? [observable4] : [])])
    )
  )
  .subscribe({
    next: value => console.log(value, "True condition"),
    complete: () => console.log("This is how it ends!")
  });

const observablef = forkJoin([observable1, observable2, observable3]);
observablef
  .pipe(
    switchMap(x =>
      combineLatest([
        ...x.map(o => of(o)),
        ...(!condition ? [observable4] : [])
      ])
    )
  )
  .subscribe({
    next: value => console.log(value, "False condition"),
    complete: () => console.log("This is how it ends!")
  });

Answer 2

您的箭头功能未正确实现。添加大括号解决了这个问题。它可能会解决您遇到的问题（我没有费心复制整个问题，所以我不能说，如果有帮助请发表评论）。

失败代码

mergeMap(res => 
  if(res[0]?.teamLeaderId){
    return getLeaderById(res[0]?.teamLeaderId).//Here I am getting res as undefined
  } else{
    return res;
  }
)

工作代码

mergeMap(res => {
  if(res[0]?.teamLeaderId){
    return getLeaderById(res[0]?.teamLeaderId).//Here I am getting res as undefined
  } else{
    return res;
  }
})

从 forkJoin 的结果数组进行 API 调用（使用 mergeMap）时出错，需要 Angular 中的 combinedResult

Getting error making a API call(using mergeMap) from the result array of forkJoin and need the combinedResult in Angular

javascript

observable

rxjs

angular

rxjs-observables