Angular中依次发起HTTP请求但仅关注第一个请求的响应

你的问题核心是：第一个API调用成功后触发第二个API，但无论第二个API成功还是失败，都要确保能拿到第一个API的响应，且不能因为第二个API的错误导致整个流中断。

当前代码的问题在于，switchMap返回的是第二个API的流，一旦第二个API报错，整个下游订阅会直接终止，所以无法收到第一个API的响应。

最佳实践方案：用switchMap结合catchError保持链式流 #

这种方式既符合RxJS的链式调用风格，又能处理第二个API的错误，同时确保第一个API的响应能正常传递：

import { of, throwError } from 'rxjs';
import { switchMap, map, catchError } from 'rxjs/operators';

const http1$ = of('response 1');
// 测试成功场景：const http2$ = of('response 2');
const http2$ = throwError('response 2'); // 测试失败场景

http1$.pipe(
  switchMap((response1) => 
    http2$.pipe(
      // 第二个API成功时，返回第一个API的响应
      map(() => response1),
      // 第二个API失败时，捕获错误并返回第一个API的响应
      catchError(() => of(response1))
    )
  )
).subscribe(response1 => {
  console.log(response1); // 无论http2成功/失败，都会输出'response 1'
});

方案说明 #

• 用switchMap承接第一个API的响应，触发第二个API的调用
• 在第二个API的流中，通过map把成功结果替换为第一个API的响应
• 通过catchError捕获第二个API的错误，直接返回第一个API的响应，避免错误向上传递中断主流
• 保持了RxJS的取消机制：如果主订阅被取消（比如组件销毁），第二个API的请求也会被自动取消，避免内存泄漏

关于你提到的tap或内部订阅的方式 #

这种方式属于"fire-and-forget"（触发即不管），虽然能实现需求，但存在两个明显问题：

1. 嵌套订阅会破坏RxJS的链式结构，难以维护和扩展
2. 主订阅取消时，第二个API的请求不会被自动取消，可能导致不必要的网络请求或内存泄漏
   如果一定要用这种方式，必须手动处理错误和取消逻辑：

import { of, throwError, EMPTY } from 'rxjs';
import { tap } from 'rxjs/operators';

const http1$ = of('response 1');
const http2$ = throwError('response 2');

http1$.pipe(
  tap((response1) => {
    const http2Subscription = http2$.pipe(
      catchError((err) => {
        // 必须处理错误，避免全局未捕获错误
        console.error('第二个API调用失败:', err);
        return EMPTY;
      })
    ).subscribe();
    
    // 如果需要手动取消，比如组件销毁时要取消http2请求
    // http2Subscription.unsubscribe();
  })
).subscribe(response1 => {
  console.log(response1);
});

但显然第一种链式方案更符合RxJS的最佳实践，推荐使用。

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