使用管道和清理的Typescript转换forkJoin结果

Question

转换forkJoin((结果的最佳方式是什么，所以在subscribe方法中，我可以写这样的东西：

this.refreshGraph(dependencies,microservices);

以下是它现在的工作方式：

loadAll(): void {
const dependencies = this.dependencyService.query();
const microservices = this.microserviceService.query();

forkJoin({dependencies, microservices})
.subscribe(results => {
this.refreshGraph(results.dependencies.body || [], results.microservices.body || []);
});
}
refreshGraph(dependencies: IDependency[], microservices: IMicroservice[]): void {
...
}

我需要存储forkJoin((的结果吗在Subscription中订阅((，并在组件被破坏时手动取消订阅dependencyService和微服务在我的情况下只是包装http:

query(req?: any): Observable<EntityArrayResponseType> {
const options = createRequestOption(req);
return this.http.get<IDependency[]>(this.resourceUrl, { params: options, observe: 'response' });
}

完整的源代码在这里可用

Answer 1

这只是一点点重构。您可以在query()方法中转换数据，也可以在loadAll()方法中进行转换。

下面是一种可以重写loadAll()方法的方法。

loadAll(): void {
const dependencies = this.dependencyService.query().pipe(map(result => result.body || []));
const microservices = this.microserviceService.query().pipe(map(result => result.body || []));;

forkJoin({dependencies, microservices}).subscribe(
({dependencies, microservices}) => this.refreshGraph(dependencies,microservices)
);
}

请记住，如果提供给forkJoin的任何内部可观察器出现错误，您将丢失任何其他可能或已经完成的可观察性的值。因此，最好正确处理错误。您可以捕获错误并返回一个空数组，如下所示。

const dependencies = this.dependencyService.query().pipe(
map(result => result.body || []),
catchError(() => of ([]))
);
const microservices = this.microserviceService.query().pipe(
map(result => result.body || []),
catchError(() => of ([]))
);

此外，您不需要在此处手动取消订阅，因为observable是由angular的httpClient服务创建的。请参阅此帖子。而forkJoin将在所有内部可观察性完成后自动完成。我希望这会有所帮助。

Answer 2

由于这篇文章，有两种可能性

使用zip((：

loadAll(): void {
zip(this.dependencyService.query(), this.microserviceService.query())
.pipe(
map(([dependencyResponse, microserviceResponse]) => {
return {
dependencies: dependencyResponse.body || [],
microservices: microserviceResponse.body || []
}
})
).subscribe(results => {
this.refreshGraph(results.dependencies, results.microservices);
});
}

或使用forkJoin((

loadAll(): void {
const dependencies$ = this.dependencyService.query();
const microservices$ = this.microserviceService.query();
forkJoin({dependencies$, microservices$})
.pipe(
map(result => {
return {
dependencies: result.dependencies$.body || [],
microservices: result.microservices$.body || []
}
}
)
)
.subscribe(results => {
this.refreshGraph(results.dependencies, results.microservices);
});
}

在这种特殊情况下，两者的工作原理相同，因为可观察到的源只会发射一次(参见Michael D的评论(

您不需要取消订阅，因为http是有限可观察的。另请参阅此答案