Angular中如何监听RxJS Observable的订阅启动事件？

是否可以在pipe中检测RxJS Observable的订阅启动时机？ #

完全可以，RxJS原生提供了对应的能力支持在pipe流中捕获订阅启动的时机。

是否需要自行封装包装Observable来实现功能？ #

不需要从零自定义封装Observable，使用RxJS官方提供的操作符即可实现需求，也可以进一步封装为通用自定义操作符复用。

具体实现方案 #

方案1：使用tap操作符的订阅钩子（RxJS 6.4+ 推荐）

tap操作符支持传入回调对象，其中subscribe回调会在Observable被订阅时立刻触发，配合finalize回调可以覆盖请求所有结束场景（成功/失败/取消）：

import { tap } from 'rxjs';
import { HttpClient } from '@angular/common/http';

this.http.get('/api/your/interface')
  .pipe(
    tap({
      // 订阅触发时开启加载指示器
      subscribe: () => this.loadingService.show(),
      // 流终止时关闭加载指示器
      finalize: () => this.loadingService.hide()
    })
  )
  .subscribe(res => {
    // 处理响应逻辑
  })

方案2：使用defer工厂函数兼容低版本RxJS

如果使用的RxJS版本低于6.4，不支持tap的subscribe钩子，可以用defer实现相同效果：defer包裹的逻辑仅会在被订阅时执行：

import { defer, finalize } from 'rxjs';

// 先定义原始请求Observable
const request$ = this.http.get('/api/your/interface');
// 用defer包裹逻辑
const wrappedRequest$ = defer(() => {
  this.loadingService.show();
  return request$.pipe(
    finalize(() => this.loadingService.hide())
  );
});

// 订阅时才会触发defer内的加载开启逻辑
wrappedRequest$.subscribe(res => {
  // 处理响应逻辑
});

方案3：封装为通用自定义操作符复用

可以把加载逻辑封装为独立的操作符，全局复用：

import { MonoTypeOperatorFunction, tap } from 'rxjs';

// 自定义操作符
export function withLoading<T>(loadingCtrl: { show: () => void; hide: () => void }): MonoTypeOperatorFunction<T> {
  return tap<T>({
    subscribe: () => loadingCtrl.show(),
    finalize: () => loadingCtrl.hide()
  });
}

// 业务代码使用
this.http.get('/api/your/interface')
  .pipe(withLoading(this.loadingService))
  .subscribe(res => {
    // 处理响应逻辑
  });

注意事项 #

• 如果流中使用了share、shareReplay等多播操作符，需将多播操作符放在加载控制操作符之前，避免后续订阅无法触发加载逻辑。
• finalize会覆盖所有流终止场景，不会出现加载指示器无法关闭的问题。
• 该方案完全适配HTTP类短生命周期Observable的需求，不需要手动重写Observable的subscribe方法。

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