使用RxJS、Angular及NgRx同步处理Observable，避免大量HTTP请求超时

这个问题我太熟悉了——当你循环给每个患者发起独立HTTP请求时，瞬间爆发的并发请求很容易触发浏览器的并发限制（一般同域名下是6-8个）或者服务器的限流策略，导致超时失败。结合RxJS 5.5的特性，给你几个从易到优的解决方案：

1. 控制并发请求数量 #

RxJS的mergeMap操作支持设置并发数，你可以限制同时发起的HTTP请求数量，避免一次性打满服务器或浏览器的并发上限。比如设置每次最多5个请求并行，剩下的排队等待：

import { from } from 'rxjs';
import { mergeMap, map, toArray } from 'rxjs/operators';

// 可根据服务器和浏览器的承载能力调整这个数值，建议6以内
const MAX_CONCURRENT = 5;

// 将Patients数组转为Observable流，逐个处理
from(this.patients).pipe(
  // 控制并发数，每个患者请求完成后再补新的请求进来
  mergeMap(patient => 
    this.hasAlerts(patient.id).pipe(
      map(hasAlert => ({ ...patient, hasAlert }))
    ),
    MAX_CONCURRENT
  ),
  // 可选：等待所有请求完成后一次性返回完整的rows数组
  toArray()
).subscribe(processedRows => {
  this.rows = processedRows;
  // 如果不需要等全部完成，也可以在这里逐个push到rows里
});

// 你的hasAlerts方法可以保留，确保返回Observable即可
hasAlerts(patientId: string): Observable<boolean> {
  return this.dataService.fetchItems<Observation>(`patients/${patientId}/observations`).pipe(
    map(observations => observations.some(obs => obs.isAlert)) // 假设你的判断逻辑是这个
  );
}

如果服务器对并发限制特别严格，你也可以用concatMap代替mergeMap——它会串行处理每个请求，一个完成后再发起下一个，彻底避免并发问题，但速度会慢一些。

2. 后端批量查询（最优解） #

如果能协调后端团队提供一个批量查询接口，比如接收一组患者ID，直接返回每个患者的hasAlert状态，那这是最高效的解决方案：从N次HTTP请求变成1次，彻底解决并发问题。

示例代码：

// 先收集所有患者ID
const patientIds = this.patients.map(p => p.id);

// 调用批量接口（假设后端支持POST传递ID列表）
this.dataService.post<Record<string, boolean>>(`patients/batch-alerts`, { patientIds }).pipe(
  map(alertResults => 
    this.patients.map(patient => ({
      ...patient,
      hasAlert: alertResults[patient.id] ?? false // 处理可能的未返回情况
    }))
  )
).subscribe(rows => {
  this.rows = rows;
});

这个方案不仅解决了超时问题，还能大幅提升页面加载速度，减少服务器压力，优先推荐尝试。

3. 缓存请求结果避免重复调用 #

如果同一个患者可能被多次查询（比如表格刷新、分页切换），可以给hasAlerts方法加上缓存逻辑，避免重复发起相同的HTTP请求：

// 用Map缓存已经请求过的患者alert状态Observable
private alertCache = new Map<string, Observable<boolean>>();

hasAlerts(patientId: string): Observable<boolean> {
  // 如果缓存里没有，才发起新请求
  if (!this.alertCache.has(patientId)) {
    const alert$ = this.dataService.fetchItems<Observation>(`patients/${patientId}/observations`).pipe(
      map(observations => observations.some(obs => obs.isAlert)),
      shareReplay(1) // 缓存结果，后续订阅直接复用
    );
    this.alertCache.set(patientId, alert$);
  }
  return this.alertCache.get(patientId)!;
}

这样即使多次调用hasAlerts查询同一个患者，也只会发起一次HTTP请求，减少无效请求的数量。

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