RxJS中filter后takeUntil与take行为差异及算子执行逻辑咨询

9月26日编辑后的代码 #

this.activatedRoute.queryParamMap
      .pipe(
        // activatedRoute.queryParamMap会先发出null值，需过滤
        filter((paramMap) => paramMap && paramMap.keys.length > 0),
        tap((value) => console.log("tap", value)),
        // 若找到参数则立即取消订阅
        take(1),
        // 若参数为空，filter始终不通过，1秒后取消订阅
        takeUntil(timer(1000)),
        finalize(()=>console.log("finalize")),
        delay(1),
        combineLatestWith(this.sortableColumns$),
      )
      .subscribe(([paramMap, sortableColumns]) => {
        console.log('paramMap');
        this.setTableOptionsFromUrl(paramMap, sortableColumns);
      });

测试场景与结果 #

使用无查询参数的示例URL http://localhost:4205/inloggen 测试时，控制台未打印tap日志，但1秒后输出了finalize。

原始代码 #

this.activatedRoute.queryParamMap
      .pipe(
        // activatedRoute.queryParamMap会先发出null值，需过滤
        filter((paramMap) => paramMap && paramMap.keys.length > 0),
        // 若找到参数则立即取消订阅
        take(1),
        // 若参数为空，filter始终不通过，1秒后取消订阅
        takeUntil(timer(1000)),
        delay(1),
        combineLatestWith(this.sortableColumns$),
      )
      .subscribe(([paramMap, sortableColumns]) => {
        console.log("paramMap")
        this.setTableOptionsFromUrl(paramMap, sortableColumns);
      });

已观察到的行为 #

• take(1)仅在filter通过、源Observable发出有效数据时才取消订阅；
• takeUntil虽在filter之后，但timer发出时无论filter是否通过都会取消订阅。

咨询问题 #

1. 若filter会拦截管道数据，为何不拦截takeUntil？
2. 若此为预期行为，如何区分哪些算子受filter拦截、哪些不受？
3. 若此非预期行为，该如何实现预期逻辑？

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