rxjs 运算符，在回调之前和之后添加日志记录

Question

我正在尝试改变这个：

/* ...inside a pipe */
tap(() => logData('my process')),
tap(() => someCallback()),
tap(() => logDataEnd('my process'),
/* pipe continues */

进入一个接受回调() => someCallback() 并在其前后添加日志记录副作用的新运算符。我的日志功能使用performance.now()，当我只使用显式的tap 版本时，它们按预期工作*，但我的操作员都没有做同样的事情。

预期结果

使用我的操作符的管道：

of(null).pipe(
  withLogging(() => callbackA()),
  withLogging(() => callbackB()),
  /* etc. */
)

应该生成如下所示的日志：

Action A start
Action A end
Action B start
Action B end
...

但是我得到了这个：

Action A start
Action B start
/* ... rest of the pipe */
Action A end
Action B end

通过查看时间戳，我可以看到 end 日志的时间戳是正确的，但 begin 的时间戳太早了。

我尝试过以不同方式使用defer，但结果没有改变。

我的尝试

withLogging<T, R>(project: (value :T) => R): OperatorFunction<T, R> {
  return (source: Observable<T>) =>
  defer(() => of(startLogging())).pipe(
    flatMap(() => source),
    tap(() => stopLogging())
  );
}

我尝试用defer 包裹整个管道，或者只是开始记录过程，或者做of(null).pipe，然后将所有效果放在一起。我什至尝试过根本不使用defer，而只是返回一个以null 开头的管道。没有产生预期的行为。

Answer 1

除非您的 someCallback() 本身是异步的和/或您希望将来对其进行 flatMap，否则我不会在这里实现新的运算符。一个简单的普通高阶函数将很好地满足您的需求。

function withLogging<A extends unknown[], C>(
  cb: (this: C, ...args: A) => void
) {
  return function(this: C, ...args: A) {
    console.log("before");
    cb.call(this, ...args);
    console.log("after");
  };
}

// snip

function someCallback() {
    console.log('Hello!');
}

someObs$.tap(withLogging(someCallback)); // before, Hello!, after for each pushed element