使用 RxJ 进行递归 HTTP 调用以填充树结构

Question

我有以下数据结构

export interface Node {
  id: string;
  name: string;
  children?: Node[];
}

我想在 RxJs 中使用递归 HTTP 调用填充由 Nodes 组成的树。

我尝试了this question 上提出的解决方案，但无法成功。 HTTP 调用正确，但 Observable 永远不会完成，因此订阅不会被执行。

这是我一直坚持的代码：

ngOnInit(): void {
  this.service.getById(this.id)
     .pipe(mergeMap(s => this.getChildren(s)))
     .subscribe(res => {
        // IT NEVER GETS HERE
     });
}

getChildren(node: Node): Observable<Node> {
  return this.service.getChildren(node.id).pipe(
    mergeMap(children => forkJoin(children.map(node => this.getChildren(node)))),
    map(children => ({ ...node, children }))
  );
}

我做错了什么？ 请帮忙，谢谢建议。

Answer 1

递归需要一个退出条件。您可以使用 RxJS iif 函数之类的东西来强制执行条件。

在下面的sn-p中，检查参数node的id属性是否定义。

免责声明：代码仅提供了一种找到解决方案的方法。下面的 sn-p 未经测试，可能无法按预期工作。

import { Observable, forkJoin, iif, of } from 'rxjs';

ngOnInit(): void {
  this.service.getById(this.id).pipe(
     mergeMap(s => this.getChildren(s))
  ).subscribe(
    res => {
      // handle response
    },
    error => {
      // handle errors
    }
  );
}

getChildren(node: Node): Observable<Node> {
  return iif(
    () => !!node.id,                         // <-- check if `node.id` is defined
    this.service.getChildren(node.id).pipe(  // <-- `id` property is defined
      forkJoin(children.map(node => this.getChildren(node)),
      map(children => ({ ...node, children }))
    ),
    of(node)                                 // <-- `id` property is undefined
  );
}