如何使用RxJS依次执行两个异步调用，无论第一个成功或失败

你的需求是必须按顺序执行两个异步任务，无论第一个任务成功或失败，都要执行第二个任务，且最终的Observable状态由第二个任务的结果决定。原代码使用嵌套订阅实现，虽能满足需求，但不符合RxJS响应式编程的最佳实践，易引发"回调地狱"，不利于后续维护与扩展。

重构思路 #

RxJS的onErrorResumeNext操作符可确保当前Observable完成（无论成功或失败）后，继续执行下一个Observable。结合ignoreElements和endWith操作符，可忽略第一个任务的结果，仅保留第二个任务的最终状态。

优化后的代码 #

import { onErrorResumeNext, ignoreElements, endWith } from 'rxjs';

public performDBTasks(): Observable<void> {
  return onErrorResumeNext(
    this.performDBTask1(),
    this.performDBTask2()
  ).pipe(
    // 忽略第一个任务的所有输出（成功值或错误）
    ignoreElements(),
    // 第二个任务成功完成时，发出void值并结束Observable
    endWith(undefined)
  );
}

代码说明 #

• onErrorResumeNext: 依次传入两个任务Observable，无论第一个任务是成功完成还是抛出错误，都会继续执行第二个任务。
• ignoreElements: 忽略第一个任务的所有通知（包括成功值和错误），因为我们只关心第二个任务的结果。
• endWith(undefined): 第二个任务成功完成时，向订阅者发出undefined（对应原代码的observer.next()），随后完成Observable；若第二个任务抛出错误，错误会直接传递给订阅者（对应原代码的observer.error()）。

另一种等价实现（使用catchError） #

若更习惯使用catchError，也可采用以下写法：

import { catchError, concatMap } from 'rxjs';

public performDBTasks(): Observable<void> {
  return this.performDBTask1().pipe(
    // 第一个任务成功时，执行第二个任务
    concatMap(() => this.performDBTask2()),
    // 第一个任务失败时，捕获错误并执行第二个任务
    catchError(() => this.performDBTask2())
  );
}

该写法逻辑与原代码完全一致：第一个任务成功则执行第二个，第一个任务失败也执行第二个，最终Observable的状态由第二个任务的结果决定。

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