Angular中如何同时执行多个API请求函数

你的问题核心是没有正确利用RxJS的并行操作符，而且原代码里的mergeMap使用方式有误，导致请求没有被触发。下面一步步帮你解决：

为什么原代码不生效？ #

1. mergeMap要求你返回一个Observable流，但你最后return undefined，RxJS无法处理这个无效的返回值，导致内部逻辑没有被订阅执行。
2. 你调用了this.getCorps()等方法，但没有把它们的返回值（Observable）传递给mergeMap，就算这些方法是API请求，也会因为没有被订阅而不会发起请求。

最优方案：去掉switch，直接并行执行 #

既然你想直接用数组执行三个函数，推荐用RxJS的merge或forkJoin，根据你的需求选择：

场景1：只要每个请求完成就处理结果（不需要等全部完成） #

用merge可以同时触发所有请求，每个请求完成时立即返回结果：

import { merge } from 'rxjs';

// 直接传入三个Observable，merge会并行订阅它们
merge(
  this.getCorps(),
  this.getDisciplines(),
  this.getDepartements()
).subscribe({
  next: (result) => {
    // 每个请求完成时都会触发这里，result是对应请求的返回数据
    console.log('请求完成:', result);
  },
  complete: () => {
    console.log('所有请求都执行完毕');
  },
  error: (err) => {
    console.error('某个请求失败:', err);
  }
});

场景2：等所有请求都成功完成后，统一处理所有结果 #

如果需要拿到所有请求的结果再做后续操作，用forkJoin更合适（它会等待所有Observable都完成后，返回一个结果数组）：

import { forkJoin } from 'rxjs';

forkJoin([
  this.getCorps(),
  this.getDisciplines(),
  this.getDepartements()
]).subscribe({
  next: ([corpsData, disciplinesData, departementsData]) => {
    // 解构数组拿到每个请求的结果
    console.log('Corps数据:', corpsData);
    console.log('Disciplines数据:', disciplinesData);
    console.log('Departements数据:', departementsData);
    // 这里可以做所有数据都拿到后的逻辑
  },
  complete: () => {
    console.log('全部请求完成');
  },
  error: (err) => {
    // 只要有一个请求失败，就会触发error
    console.error('请求出错:', err);
  }
});

注意事项 #

• 确保this.getCorps()、this.getDisciplines()、this.getDepartements()这三个方法返回的是Observable（比如Angular中HttpClient的请求默认返回Observable）。
• 冷Observable（比如HttpClient请求）只有被订阅时才会执行，所以一定要调用.subscribe()，否则请求不会发起。

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