javascript - 如何通过使用 takeUntil 的多个条件来停止订阅

Question

我想根据两个条件停止可观察订阅:

时间(使用 import { timer } from 'rxjs/internal/observable/timer'; )

或

执行状态(使用您将在下面看到的请求返回的对象)

发生了什么:
它只是根据时间停止执行(使用 import { timer } from 'rxjs/internal/observable/timer'; )
这是我当前的代码:
出于示例目的，属性、变量及其值的名称已更改:

import { finalize } from 'rxjs/internal/operators/finalize';
import { interval } from 'rxjs/internal/observable/interval';
import { timer } from 'rxjs/internal/observable/timer';
import { takeUntil, first } from 'rxjs/operators';
import { merge, EMPTY, of } from 'rxjs';

.
. // Attributes and Class declaration here
.


async startProcess(): Promise<void> {

    this.isProcessLoading = true;

    const { someId } = await this.exampleService.execute().toPromise();

    const interval$ = interval(1000);
    const timeLimiter$ = timer(10000);

    const request$ = this.exampleService.doRequest();
    
    const isEventFinished$ = EMPTY;

    // My goal here is for the result of this function to return an observable that notifies 
    // if the first parameter emits an event OR if the second parameter emits another. That is, I want to notify if any condition is valid
    const stopConditions$ = merge(isEventFinished$, timeLimiter$);

    const handleSuccess = (object: MyType) => {

      if (object.status === 'FINALIZED') {

        this.object = object;
        isEventFinished$.subscribe();
      }
    };

    const handleError = () =>  this.showErrorComponent = true;

    interval$
    .pipe(takeUntil(stopConditions$))
    .pipe(finalize(() => this.isSimulationLoading = false))
    .subscribe(() => request$.subscribe(handleSuccess, handleError));
}

代码“有效”是因为 timeLimiter$火灾 takeUntil 10 秒后。但是，我希望有可能在时间限制之前停止......
我希望 takeUntil 也能够从这里运行: isEventFinished$.subscribe()如果上面的代码片段正确执行，它应该停止间隔 $，但它没有。那是我的问题
我已经尝试过的:

我不知道两个管道是否比只使用一个这样的管道有什么不同:.pipe(takeUntil(stopConditions$), finalize(() => this.isSimulationLoading = false)) .但是，我已经尝试过了，但没有奏效

已尝试替换此 isEventFinished$为: const isEventFinished$ = of(1)和他的订阅:timeLimiter$.pipe(first()).subscribe() .
但这也不起作用。实际上，这会阻止请求被执行(我不知道为什么)

Answer 1

我刚刚用 Stackblitz 尝试了这段代码，它“工作”了……但我不确定你到底想做什么？然后我做了一些更新，以更好地了解发生了什么。
在此处查看 Stackblitz:https://stackblitz.com/edit/angular-takeuntil-deborahk
关键变化:

const stopConditions$ = merge(this.isEventFinished$, timeLimiter$).pipe(
  tap(s => console.log("stop", s))
);

interval$.pipe(takeUntil(stopConditions$)).subscribe({
  next: handleSuccess,
  error: handleError,
  complete: () => {
    this.isSimulationLoading = false;
    console.log("isSimulationLoading", this.isSimulationLoading)
  }
});

这有帮助吗？
编辑:我添加了一个“完成”按钮来模拟任何会导致完成操作的操作。
定义 isEventFinished通过将其声明为 Subject 或 BehaviorSubject 来作为 Observable(BehaviorSubject 具有默认值，Subject 没有)。

  isEventFinished$ = new Subject<boolean>();

然后，每当完成事件发生时，使用 next将值发送到 isEventFinished 的方法溪流。

this.isEventFinished$.next(true);

那么这段代码应该可以工作:

const stopConditions$ = merge(this.isEventFinished$, timeLimiter$).pipe(
  tap(s => console.log("stop", s))
);

interval$.pipe(takeUntil(stopConditions$)).subscribe({
  next: handleSuccess,
  error: handleError,
  complete: () => {
    this.isSimulationLoading = false;
    console.log("isSimulationLoading", this.isSimulationLoading);
  }
});

查看更新的 Blitz 。
那样有用吗？