在switchMap中进行嵌套的Http调用

问题描述

if (this.role === 'admin' || this.role === 'superadmin') {
  this.organizationService.getDropdownorganizations().pipe(
    tap(availableOrganizations => {
      this.availableOrganizations = availableOrganizations;
    }),switchMap(availableOrganizations => {
      return this.projectService.getProjects(availableOrganizations[0]?.id);
    }),).subscribe(availableProjects => {
    this.availableProjects = availableProjects;
    this.getNotifications();
  });
} else {
  this.getNotifications();
}

大家好，

在上面的代码中，我将orgId传递给项目服务并订阅availableProjects

我的问题是我想向getUsers（）发出另一个与getProjects（）相同的请求，并传递orgId并以此来获取项目和用户。

怎么办？

解决方法

很多我们都不知道。我假设getProjects和getUsers都发出一次然后完成。在这种情况下，您可以使用forkJoin一次处理这两项，并在完成后返回两者的结果。

可能看起来像这样：

if (this.role === 'admin' || this.role === 'superadmin') {
  this.organizationService.getDropdownOrganizations().pipe(
    tap(availableOrganizations => 
      this.availableOrganizations = availableOrganizations
    ),switchMap(availableOrganizations => forkJoin({
      projects: this.projectService.getProjects(availableOrganizations[0]?.id),users: this.projectService.getUsers(availableOrganizations[0]?.id)
    })),).subscribe(({projects,users}) => {
    this.availableProjects = projects;
    this.availableUsers = users;
    this.getNotifications();
  });
} else {
  this.getNotifications();
}

,

如果您希望它们在同一时间执行，我会使用forkJoin来做到这一点。

switchMap(availableOrganizations => {
  return forkJoin([
      this.projectService.getProjects(availableOrganizations[0]?.id),this.projectService.getUsers(availableOrganizations[0]?.id);
  ]);
}),

然后，您可以访问两个值，作为传递给下一个流运算符的数组的属性。我建议在那里使用数组销毁：

).subscribe(([availableProjects,users ]) => {

,

您可以订阅相同的冷观测值，并与shareReplay

共享结果

if (this.role === 'admin' || this.role === 'superadmin') {
  const availableOrganizations$ = this.organizationService.getDropdownOrganizations().pipe(
    shareReplay(1),);

  availableOrganizations$.subscribe(availableOrganizations => this.availableOrganizations = availableOrganizations);

  availableOrganizations$.pipe(
    switchMap(availableOrganizations => this.projectService.getProjects(availableOrganizations[0]?.id)),).subscribe(availableProjects => {
    this.availableProjects = availableProjects;
    this.getNotifications();
  });

  // TODO: same for user as the previous block
} else {
  this.getNotifications();
}