Angular 7+:如何从api端点静默地实现刷新

Question

我正在寻找一些意见来实现从给定数据端点的"静默"提取。

目前，我有一个在组件init上获取数据的实现，正如您所期望的

//apiService.ts
getData(params): Promise < Member[] > {
return this.httpService.doRequest(`${this.baseUrl()}/member`, 'get', convertToQueryParams(params), null);
}

//component.ts
this.apiService
.getData(params)
.then((response: any) => {
const responseData: Member[] = response.data
this.data = responseData.map(member => new Display(member))
})
.catch(e => console.log('error occured while fetching table data. Try again: ', e))

之后，我想在同一个getData端点上实现静默刷新，该端点每5分钟提取一次数据，并在用户没有意识到数据已更新的情况下用新数据静默地绘制页面。这也意味着不在页面上显示这种静默获取的任何加载或刷新行为。

我的组织目前使用angular 7，但我们计划今年升级到angular 12。任何想法或建议都将不胜感激。

Answer 1

由于您在Angular中工作，因此您可以始终使用可观察性。我看到你在使用一个承诺，但重新调整一个可观察到的是一个快速的解决方案。您可以使用定时器功能，它将完全按照您的意愿进行操作：https://www.learnrxjs.io/learn-rxjs/operators/creation/timer

另一种选择是使用setInterval并保存其引用，以便在组件损坏时取消它。https://developer.mozilla.org/en-US/docs/Web/API/setInterval