Angular/RxJS如何从顺序请求的HTTP列表中返回第一个成功响应？

原代码问题说明 #

你现有的实现存在两个核心问题：

• 同步for循环在第一次迭代就直接返回了第一个请求的Observable，后续服务器的请求逻辑根本不会执行
• 同步循环无法根据异步HTTP请求的返回结果判断是否要中断迭代，必须通过RxJS操作符实现异步流的控制

最终实现代码 #

首先导入需要的依赖：

import { concat, EMPTY } from 'rxjs';
import { map, take, catchError } from 'rxjs/operators';

业务逻辑实现：

getClientData() {
  // 把服务器列表逐个转成请求Observable
  const requestList = this.httpsServersList.map(server => 
    this.queryData(server).pipe(
      map((response: any) => {
        const data = (response || '').trim();
        if(data && this.dataIsCorrect(data)) {
          // 数据校验通过直接返回有效数据
          return data;
        }
        // 校验不通过主动抛出错误，进入错误捕获逻辑
        throw new Error('无效数据');
      }),
      // 捕获请求失败、数据校验失败的所有异常，返回EMPTY直接结束当前Observable
      catchError(() => EMPTY)
    )
  );

  // 按顺序执行请求，取第一个有效返回值后直接终止整个流
  return concat(...requestList).pipe(
    take(1)
  );
}

private queryData(url: string) {        
  return this.http.get(url, { responseType: 'text' });
}

逻辑说明 #

• concat操作符会按传入顺序逐个订阅Observable，只有前一个Observable完结后才会订阅下一个，天然满足依次请求的需求
• EMPTY是一个仅发送complete信号、不返回任何值的Observable，当请求失败或数据校验不通过时返回它，concat就会直接跳过当前请求、执行下一个
• take(1)会在接收到第一个有效返回值后直接终止整个流，后续还未执行的服务器请求完全不会被触发，等价于你需要的循环中断效果

调用方式 #

this.getClientData().subscribe({
  next: (validData) => {
    // 此处拿到第一个校验通过的服务器返回数据
    console.log('有效数据：', validData);
  },
  error: () => {
    // 所有服务器全部请求失败/校验不通过时触发
    console.log('无可用服务器返回有效数据');
  }
})

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