angular - 是否有管道操作符会在订阅解析之前运行代码？前 : http call

Question

我正在进行 HTTP 调用并希望在进行 HTTP 调用之前设置一个加载指示器。目前我正在做:

this.loadingIndicatorService.setLoadingIndicatorOn(true)
    this.cop.getunMappedTechnologyDetails().pipe(
      finalize(() => {
        this.loadingIndicatorService.setLoadingIndicatorOn(false);
      }),
    ).subscribe(
      res => {...}

但如果可能的话，我想在管道内设置 loadingindicator，这样我就可以确保它运行，这样我就可以轻松地将它复制/粘贴到我所有的订阅前。 (我已经研究过 AOP，但在这种特殊情况下似乎不切实际)

tap 不起作用，因为它首先获取然后对结果采取行动，但我将其显示为我想要的视觉效果:

this.cop.getunMappedTechnologyDetails().pipe(
      tap(() => this.loadingIndicatorService.setLoadingIndicatorOn(true)),
      finalize(() => {
        this.loadingIndicatorService.setLoadingIndicatorOn(false);
      }),
    ).subscribe(
      res => {...}

我可能也在研究一个通用函数，但现在我需要一个快速的解决方案，我可以在我的订阅前粘贴这些管道。

编辑:
我已经尝试过带延迟的 Jan-Niklas Wortmann 选项，但我在 .pipe 上遇到错误:

然后我尝试在管道内使用它:

this.cop.getunMappedSafeDetails().pipe(
      defer(() => {
        this.loadingIndicatorService.setLoadingIndicatorOn(true);
        return this.cop.getunMappedSafeDetails();
      }),
      finalize(() => {
        this.loadingIndicatorService.setLoadingIndicatorOn(false);
      }),
    ).subscribe(...);

但我有错误:

Argument of type 'Observable<String[]>' is not assignable to parameter of type 'OperatorFunction<String[], {}>'.
  Type 'Observable<String[]>' provides no match for the signature '(source: Observable<String[]>): Observable<{}>'.

Answer 1

像这样写:

this.cop.getunMappedTechnologyDetails().pipe(
  startWithTap(() => this.loadingIndicatorService.setLoadingIndicatorOn(true)),
  finalize(() => this.loadingIndicatorService.setLoadingIndicatorOn(false)),
)

每当您订阅上述 Observable 时， startWithTap将立即执行您传递的任何内容，然后切换到 Original Observable。最后，finalize 将在源 Observable 完成时执行回调。

以及它的自定义运算符:

import { Observable, of } from 'rxjs';
import { switchMap, tap } from 'rxjs/operators';

export function startWithTap<T>(callback: () => void) {
  return (source: Observable<T>) =>
    of({}).pipe(tap(callback), switchMap((o) => source));
}