如何在Observable的起始和结束阶段添加日志

你需要在Observable被订阅时打印起始日志，等待3000毫秒后输出hello world!，最后输出end。现有代码已通过finalize实现了结束日志，只需补全起始阶段的日志逻辑，以下是两种可行方案：

方法一：使用tap操作符的subscribe回调 #

tap操作符支持传入配置对象，其中subscribe回调会在Observable被订阅时立即执行，正好用来处理起始日志。

修改后的完整代码：

import { Observable, finalize, timer, map, tap } from 'rxjs'

const log = function <T>(o: Observable<T>): Observable<T> {
  // 订阅起始时打印日志
  o = o.pipe(
    tap({
      subscribe: () => console.log('start')
    }),
    // 结束阶段打印日志
    finalize(() => {
      console.log('end')
    })
  )

  return o
}

const o = timer(3000)
  .pipe(
    map(() => 'hello world!')
  )

log(o).subscribe((res) => {
  console.log(res)
})

方法二：手动创建Observable包裹原流 #

通过创建新的Observable，在订阅触发时先打印起始日志，再订阅原Observable，这种方式更直观地控制订阅时机：

修改后的完整代码：

import { Observable, finalize, timer, map } from 'rxjs'

const log = function <T>(o: Observable<T>): Observable<T> {
  return new Observable(subscriber => {
    // 订阅开始时打印日志
    console.log('start');
    // 订阅原Observable并转发所有通知
    const subscription = o.subscribe(subscriber);
    // 返回清理函数，取消订阅原流
    return () => subscription.unsubscribe();
  }).pipe(
    finalize(() => {
      console.log('end')
    })
  )
}

const o = timer(3000)
  .pipe(
    map(() => 'hello world!')
  )

log(o).subscribe((res) => {
  console.log(res)
})

效果验证 #

运行代码后，会立即打印start，等待3000毫秒后依次打印hello world!和end，完全符合预期。

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