Angular中如何并行执行多API调用并实时处理响应？

你的核心需求是并行调用多个API，且每个API返回后立即处理响应，无需等待所有请求完成。原代码使用的combineLatest会等待所有传入的Observable都至少发出一次值才会输出结果，完全不匹配你第二个API耗时30-40秒的场景，这里推荐用**merge操作符**替代。

为什么选merge？ #

• merge会同时订阅所有传入的Observable
• 任意一个Observable发出值时，会立刻将该值传递下去，无需等待其他请求完成或返回
• 完美契合“响应到达即处理”的需求

修改后的代码示例 #

search(metaInfo: Interface1, searchDetails: Interface2) {
  return this.http.post<Interface3>(API_ROUTES.history, metaInfo).pipe(
    switchMap((res) => {
      // 并行创建两个API请求流
      const searchOne$ = this.http.post<any>(API_ROUTES.searchOne, {...searchDetails, requestId: res.requestId})
        .pipe(map(response => ({ source: 'searchOne', data: response }))); // 可选：给响应加来源标识，方便后续区分处理
      
      const searchTwo$ = this.http.post<any>(API_ROUTES.searchTwo, {...searchDetails, requestId: res.requestId})
        .pipe(map(response => ({ source: 'searchTwo', data: response })));

      // 用merge合并流，每个响应到达时立即发出
      return merge(searchOne$, searchTwo$);
    })
  );
}

使用方式 #

订阅返回的Observable时，每个API的响应会在返回时立刻触发处理逻辑：

this.search(metaInfo, searchDetails).subscribe({
  next: (result) => {
    // 每个API返回都会进入这里
    if (result.source === 'searchOne') {
      // 处理searchOne的响应数据
      console.log('searchOne结果:', result.data);
    } else if (result.source === 'searchTwo') {
      // 处理searchTwo的响应数据
      console.log('searchTwo结果:', result.data);
    }
  },
  error: (err) => {
    // 任意一个API报错都会触发这里
    console.error('请求出错:', err);
  }
});

额外说明 #

• 如果不需要区分响应来源，可以去掉map加标识的步骤，直接合并原始请求流即可
• merge会按响应返回的顺序触发处理逻辑，先返回的先处理
• 后续若需要扩展更多API，merge可以直接传入多个Observable，无需额外调整

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