Angular 12/rxjs：如何以单独的方法处理 forkJoin

Question

给出以下代码 sn-p，它执行以下操作：

1. 先获取列表
2. 那么一旦 1) 完成，调用 initRouter()

ngOnInit(): void {

   forkJoin([
      this.httpHandlerCached.getListsA(),
      this.httpHandlerCached.getListsB(),
      this.httpHandlerCached.getListsC()
   ]).subscribe(res => {
        this.listA = res[0];
        this.listB = res[1];
        this.listC = res[2];
        this.initRouter();
   })
}
 
initRouter(){
    this.route.params.subscribe(params =>
      //do something with params and lists...
}

如何将第一个 forkjoin-part 放入这样的自己的方法中：

ngOnInit(): void {

   //Pseudo-Code:
   this.initListReturnForkJoin().subscribe(res => {
        this.listA = res[0];
        this.listB = res[1];
        this.listC = res[2];
        this.initRouter();
   })
}

//Pseudo-Code:
initListReturnForkJoin(): ??? {
   return forkJoin([
      this.httpHandlerCached.getListsA(),
      this.httpHandlerCached.getListsB(),
      this.httpHandlerCached.getListsC()
   ])
}
 
initRouter(){
    this.route.params.subscribe(params =>
      //do something with params and lists...
}

对不起，我不知道如何更好地表达这个问题......感谢任何指导

Answer 1

嵌套订阅通常是代码异味。您可以再次使用forkJoin 或尝试withLatestFrom（例如）以避免嵌套订阅。

ngOnInit(): void {

  this.route.params.pipe(
    // Update your lists every time the route emits
    withLatestFrom(this.fetchLists())
  ).subscribe(([params, listDict]) => {

    // Right here, both params and lists are defined
    this.doSomethingWithFetchedLists();

  });

}

// I don't know the types of your lists, 
// so I've put `any` as a placeholder for now.
fetchLists(): Observable<[any[],any[],any[]]> {

  return forkJoin({
    listA: this.httpHandlerCached.getListsA(),
    listB: this.httpHandlerCached.getListsB(),
    listC: this.httpHandlerCached.getListsC()
  }).pipe(
    tap(listDict => {
      // Update some global values as a side-effect of this
      // observable emitting. 
      this.listA = listDict.listA;
      this.listB = listDict.listB;
      this.listC = listDict.listC;
    })
  );
  
}