RxJS中add与finalize的区别及使用优选咨询

你贴的两段代码在当前场景下效果确实一致，但两者是RxJS不同层面的API，核心差异和适用场景有明显区别：

1. 所属层级不同 #

• add()是Subscription实例的方法，必须在调用subscribe()拿到订阅对象后才能使用，属于「订阅执行后」的操作
• finalize()是管道操作符，嵌入在Observable的数据流管道中，属于「数据流定义阶段」的操作

2. 作用范围不同 #

• add()绑定的是单次订阅的销毁逻辑：每个订阅实例可以单独添加自己的回调，不同订阅之间的add回调互不干扰
• finalize()绑定的是Observable数据流的终止逻辑：只要订阅这个经过pipe处理后的Observable，不管是哪次订阅，都会触发finalize的回调

举个例子就能看出差异：

// 用finalize的情况：所有订阅共享同一段终止逻辑
const processed$ = this.test$.pipe(finalize(() => console.log('finalized')));
processed$.subscribe(); // 触发finalize回调
processed$.subscribe(); // 再次触发finalize回调

// 用add的情况：每个订阅独立绑定终止逻辑
const raw$ = this.test$;
raw$.subscribe().add(() => console.log('added')); // 第一个订阅的回调
raw$.subscribe().add(() => console.log('added')); // 第二个订阅的回调，各自触发

3. 执行时机的细节差异 #

虽然大部分场景下两者都会在订阅终止（完成、报错、手动取消）时触发，但在复杂管道中有区别：

• 如果管道中存在catchError这类可以恢复数据流的操作，finalize只会在整个数据流真正终止时触发；而add只要当前订阅的生命周期结束（比如手动取消）就会触发
• 多个finalize会按管道的反向顺序执行（靠近subscribe的先执行），而多次调用add会按添加顺序执行回调

什么时候用哪种？ #

• 如果你需要给某一次特定订阅绑定专属的清理逻辑（比如当前组件销毁时取消订阅并清理资源），用add()更直接
• 如果你希望所有订阅这个Observable的消费者都执行同一段通用清理逻辑（比如数据流结束后关闭loading状态），把finalize()放进管道更合适

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