为什么这个Angular http请求执行不一致

Question

我对Angular还很陌生，试图理解第三方编写的代码库。我们试图从API中获取一个简单的json对象，该对象返回此形状的数据。

{
"total": 18,
"completed_items": 18
}

我们正试图从一个看起来像这样的家庭组件中获取这个：

console.log('in init'); // this executes
this.requiredByYouOverview$ = this.requiredService
.getRequiredOverview()
.pipe(
tap((requiredOverview: RequiredOverview) => {
console.log('in tap'); // this occasionally executes
this.allRequiredItemsCompleted =
requiredOverview.total > 0 &&
requiredOverview.total === requiredOverview.completedItems;
})
);

所需服务如下：

export class RequiredService {
...
public getRequiredOverview(): Observable<RequiredOverview> {
console.log('in getRequiredOverview'); // this executes
return this.http
.get<RequiredOverviewRaw>(
`${this.apiService.getApiEndpoint()}${
environment.requiredOverviewApiEndpoint
}`
)
.pipe(
map((reqOverviewRaw: RequiredOverviewRaw) =>
RequiredMapper.mapOverviewFromRaw(reqOverviewRaw)
)
);
}

所需的映射器如下所示：

export class RequiredMapper {
public static mapOverviewFromRaw(
reqOverviewRaw: RequiredOverviewRaw
): RequiredOverview {
console.log('in mapOverviewFromRaw'); // this occasionally executes
const reqOverview: RequiredOverview = {
total: reqOverviewRaw.total,
completedItems: reqOverviewRaw.completed_items,
};
return reqOverview;
}
}

控制台有时会显示：

in init home.component.ts:151:12
in getRequiredOverview required.service.ts:33:12

但也会经常显示：

in init home.component.ts:151:12
in getRequiredOverview required.service.ts:33:12
in mapOverviewFromRaw required.mapper.ts:8:12
in tap home.component.ts:156:18

我如何才能让这一点持续有效？

Answer 1

很难说。。。但是in init和in getRequiredOverview被立即调用。CCD_ 3仅在第一个HTTP请求完成之后被调用，而CCD_。

因此，HTTP请求可能真的很慢(网络或服务器问题(，或者出现错误，因此请求停止并失败，您将看不到日志。

Answer 2

因此，我的解决方案是将compontents管道/抽头转换为订阅。

this.requiredService
.getRequiredOverview()
.subscribe((requiredOverview: RequiredOverview) => {
this.allRequiredItemsCompleted =
requiredOverview.total > 0 &&
requiredOverview.total === requiredOverview.completedItems;
});

我不确定这是否是一个最佳的解决方案，但它似乎对我有效。