Angular中第一个API超时后调用第二个API的最优实现方案

你当前的实现核心问题是**finalize操作符会在第一个请求完成（无论成功还是超时失败）时都触发callSecondApi**，这就导致第一个请求正常返回时也会调用第二个API，完全不符合你“仅第一个请求超时才调用第二个”的需求。

正确的实现应该利用RxJS的timeout+catchError组合，仅在第一个请求超时错误时切换到第二个API，同时抽离重复的数据处理逻辑来简化代码：

步骤1：抽离公共数据处理函数 #

把两个请求相同的数据过滤、赋值逻辑抽成单独函数，避免代码冗余：

private processData(data: any[]) {
  this.myList = data.filter(item => !this.removeStuffFromList(item, data));
  if (this.myList.length > 0) {
    this.originalList = this.myList;
    // 这里执行你提到的"do some other stuff"
  }
}

步骤2：实现超时切换逻辑 #

import { throwError } from 'rxjs';
import { timeout, catchError } from 'rxjs/operators';

// 主请求逻辑
this.service.returnData1(param1, param2)
  .pipe(
    // 为第一个请求设置5秒超时
    timeout(5000),
    // 捕获错误，仅在超时错误时切换到第二个API
    catchError((err) => {
      // 判断是否为超时错误（RxJS抛出的超时错误name为TimeoutError）
      if (err.name === 'TimeoutError') {
        return this.service.returnData2(param1, param2);
      }
      // 如果是其他错误（比如网络异常），直接抛出错误
      return throwError(() => err);
    })
  )
  .subscribe({
    // 无论第一个还是第二个请求成功，都用同一个处理函数
    next: (data) => this.processData(data),
    error: (err) => console.log(err.message)
  });

逻辑说明 #

• timeout(5000)：第一个请求超过5秒未返回时，会抛出TimeoutError
• catchError：捕获错误后判断错误类型，只有超时错误才返回第二个API的Observable，订阅流会自动切换到第二个请求的处理
• 公共的processData函数：统一处理两个请求返回的数据，减少重复代码，提升可维护性

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