Angular 12/rxjs 如何将forkJoin请求逻辑封装为独立方法

你的抽离思路完全可行，只需要补全方法的返回值定义即可，不同技术栈的写法如下：

JavaScript 项目写法 #

不需要声明返回类型，直接编写方法即可：

initListReturnForkJoin() {
  return forkJoin([
    this.httpHandlerCached.getListsA(),
    this.httpHandlerCached.getListsB(),
    this.httpHandlerCached.getListsC()
  ])
}

调用逻辑和你写的伪代码完全一致，不需要额外修改。

TypeScript 项目写法 #

需要先从rxjs导入Observable类型，再根据三个请求的返回值定义方法的返回类型：

import { Observable, forkJoin } from 'rxjs';

// 泛型参数按顺序对应三个请求的返回值类型，示例中假设三个接口返回类型分别为ListA、ListB、ListC
initListReturnForkJoin(): Observable<[ListA, ListB, ListC]> {
  return forkJoin([
    this.httpHandlerCached.getListsA(),
    this.httpHandlerCached.getListsB(),
    this.httpHandlerCached.getListsC()
  ])
}

如果暂时不确定请求的返回类型，也可以用Observable<any[]>作为临时写法，不过更推荐给请求补充明确的类型定义，方便后续类型校验。

优化写法建议 #

你还可以把列表赋值的逻辑也一起抽离到独立方法里，进一步简化ngOnInit的逻辑：

import { Observable, forkJoin, tap } from 'rxjs';

initListData(): Observable<void> {
  return forkJoin([
    this.httpHandlerCached.getListsA(),
    this.httpHandlerCached.getListsB(),
    this.httpHandlerCached.getListsC()
  ]).pipe(
    tap(res => {
      this.listA = res[0];
      this.listB = res[1];
      this.listC = res[2];
    })
  )
}

// ngOnInit调用
ngOnInit(): void {
  this.initListData().subscribe(() => {
    this.initRouter();
  })
}

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