RxJS中如何实现订阅Observable时执行前置逻辑并发起HTTP请求

你手动包裹new Observable的写法逻辑正确，但RxJS官方提供了专门的defer操作符处理这类「订阅时才执行Observable创建逻辑」的场景，是该场景下的标准实现，代码更简洁，也不需要手动处理订阅转发、资源释放的边界逻辑。

代码实现 #

首先从rxjs导入defer：

import { defer } from 'rxjs';

改造你的foo函数：

public foo<T>(): Observable<T> {
  return defer(() => {
    // 这里的逻辑只有在Observable被订阅时才会执行
    // 执行X、Y、Z若干前置指令

    return this.http.get<T>(/* 你的请求参数 */);
  });
}

方案优势 #

• 语义完全匹配需求：defer接受一个Observable工厂函数，只有当消费者订阅时，才会调用这个工厂函数生成真正的源Observable，从根源上避免了前置逻辑在未订阅时提前执行的问题。
• 内置完整的流处理逻辑：不需要你像手动创建Observable那样手动转发next/error/complete信号、手动绑定取消订阅逻辑，defer会自动把内部http请求Observable的所有事件、取消订阅逻辑透传给外部订阅者，避免遗漏边界处理导致的内存泄漏、事件丢失问题。
• 自动错误捕获：如果前置的X/Y/Z逻辑执行时抛出同步错误，defer会自动把错误作为error事件下发给订阅者，不需要你手动调用observer.error()传递错误。

不推荐的写法说明 #

部分开发者会用of(undefined).pipe(switchMap(() => { /* 前置逻辑+http请求 */ }))的方式实现相同效果，但这种写法语义模糊，还会额外创建一层不必要的中间Observable，性能和可读性都不如直接用defer。
如果你需要在前置逻辑中添加资源清理逻辑（比如清除定时器、解绑事件），可以在工厂函数中返回的Observable上添加teardown逻辑，和原生Observable的销毁逻辑写法完全一致。

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