在回调之前和之后添加日志记录的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