Angular 7+ 如何实现从API端点静默拉取数据并更新页面？

基础实现（兼容Angular 7 ~ 12） #

你可以基于RxJS实现轮询逻辑，这套实现同时兼容Angular 7配套的RxJS 6.x版本和Angular 12对应的RxJS版本，后续升级不需要修改核心逻辑。
你不需要改动现有apiService.ts的getData接口，只需要调整组件内的逻辑：

1. 引入必要的RxJS依赖

import { timer, Subject, from, EMPTY } from 'rxjs';
import { switchMap, takeUntil, catchError } from 'rxjs/operators';

2. 组件内声明销毁通知流，避免内存泄漏

// component.ts
private destroy$ = new Subject<void>();

3. 替换原有单次数据请求逻辑，整合初始化请求+定时轮询

// component.ts ngOnInit 生命周期内实现
const POLL_INTERVAL = 5 * 60 * 1000; // 5分钟轮询间隔，单位毫秒

timer(0, POLL_INTERVAL)
  .pipe(
    switchMap(() => from(this.apiService.getData(params))
      .pipe(
        catchError(e => {
          console.log('静默拉取数据失败，等待下一次重试: ', e);
          return EMPTY; // 错误不中断轮询流
        })
      )
    ),
    takeUntil(this.destroy$) // 组件销毁时终止轮询
  )
  .subscribe((response: any) => {
    const responseData: Member[] = response.data;
    this.data = responseData.map(member => new Display(member));
  })

4. 组件销毁时清理轮询

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

静默效果适配注意事项 #

如果你的项目配置了全局HTTP拦截器统一展示加载提示，需要额外给静默请求加标识跳过加载逻辑：

• 修改getData请求参数，新增自定义配置项：

// apiService.ts
getData(params, isSilent = false): Promise < Member[] > {
  return this.httpService.doRequest(
    `${this.baseUrl()}/member`, 
    'get', 
    convertToQueryParams(params), 
    null,
    { silent: isSilent } // 把静默标记传入请求配置
  );
}

• 调用轮询时传入静默标记：

switchMap(() => from(this.apiService.getData(params, true)))

• 全局HTTP拦截器中判断，如果请求携带silent: true则不触发加载提示逻辑。

可选优化项 #

• 如果你使用表格展示数据，可以给*ngFor添加trackBy函数，仅更新变更的行DOM，完全避免列表重绘的闪烁感，进一步弱化用户感知。
• 可以配合Page Visibility API，当用户切到其他标签页时暂停轮询，切回时立即触发一次拉取，减少不必要的资源消耗。

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