如何在RxJS的concat操作符完成后执行代码

你当前的问题是因为tap操作符会在每个Observable发出值时触发，所以每个任务完成都会打印一次"Finish"。要实现所有任务完成后只执行一次结束代码，有两种常用方案：

方案1：使用finalize操作符 #

finalize会在整个Observable序列终止时执行（无论正常完成还是出现错误），适合需要在序列结束时统一清理或执行收尾逻辑的场景：

const { concat, of, tap, finalize } = rxjs;
const { delay  } = rxjs.operators;

let tasks = [
  of(1).pipe(delay(1000)),
  of(2).pipe(delay(2000)),
  of(3).pipe(delay(1000)),
  of(4).pipe(delay(2000)),
];

concat(...tasks)
  .pipe(
    tap(n => console.log(`result for task ${n}`)),
    finalize(() => console.log('Finish'))
  )
  .subscribe();

方案2：利用subscribe的完成回调 #

subscribe方法的第三个参数是序列正常完成时触发的回调，适合只需要在所有任务成功完成后执行收尾的场景：

const { concat, of } = rxjs;
const { delay  } = rxjs.operators;

let tasks = [
  of(1).pipe(delay(1000)),
  of(2).pipe(delay(2000)),
  of(3).pipe(delay(1000)),
  of(4).pipe(delay(2000)),
];

concat(...tasks)
  .subscribe(
    n => console.log(`result for task ${n}`),
    err => console.error('任务执行出错:', err), // 可选：处理错误
    () => console.log('Finish')
  );

关键区别 #

• finalize：无论序列是正常完成还是因错误终止，都会执行回调。
• subscribe完成回调：仅在所有任务都正常执行完毕时触发。

根据你的实际需求选择对应的方案即可。

内容的提问来源于stack exchange，提问作者Kamil Kiełczewski