Angular 5中实现后台长轮询REST服务的最佳实践与示例

你的代码之所以没有调用REST接口，核心问题在于HttpClient返回的是冷Observable——这类Observable只有在被订阅时才会触发实际的HTTP请求。你现在只调用了map操作符，但没有订阅这个Observable，所以请求根本不会发起。

下面我会给出符合Angular最佳实践的长轮询服务实现，解决你的问题同时兼顾稳定性和可维护性：

核心最佳实践要点 #

• 用递归调用实现持续轮询，确保请求完成后自动发起下一次请求
• 加入错误处理逻辑，避免单次请求失败导致整个轮询中断
• 封装内部状态，对外暴露安全的Observable供组件订阅
• 支持主动停止轮询的机制
• 利用APP_INITIALIZER在应用加载完成后自动启动轮询

完整示例代码 #

1. 实现PollingService #

import { Injectable, OnDestroy } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Subject, Observable, catchError, tap, delay, takeUntil } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class PollingService implements OnDestroy {
  private readonly pollUrl = 'http://localhost:8080/api/poll';
  private readonly stopPolling$ = new Subject<void>();
  private readonly pollDataSubject = new Subject<any>();

  // 供组件订阅的公开数据流（禁止外部直接修改Subject）
  pollData$: Observable<any> = this.pollDataSubject.asObservable();

  constructor(private http: HttpClient) {}

  // 启动轮询
  startPolling(): void {
    this.initiatePoll()
      .pipe(takeUntil(this.stopPolling$))
      .subscribe();
  }

  // 主动停止轮询
  stopPolling(): void {
    this.stopPolling$.next();
    this.stopPolling$.complete();
  }

  // 单次轮询请求，递归调用实现持续轮询
  private initiatePoll(): Observable<any> {
    return this.http.get<any>(this.pollUrl).pipe(
      // 将收到的数据推送给订阅者
      tap((data) => {
        console.log('轮询收到数据:', data);
        this.pollDataSubject.next(data);
      }),
      // 处理请求错误，避免轮询中断
      catchError((error) => {
        console.error('轮询请求失败:', error);
        // 失败后延迟3秒再重试，避免频繁请求后端
        return delay(3000);
      }),
      // 无论请求成功或失败，都发起下一次轮询
      tap(() => this.initiatePoll())
    );
  }

  // 服务销毁时自动停止轮询
  ngOnDestroy(): void {
    this.stopPolling();
  }
}

2. 配置应用初始化时启动轮询 #

在app.module.ts中配置APP_INITIALIZER，确保应用加载完成后自动启动轮询：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { PollingService } from './polling.service';

// 初始化函数：启动轮询服务
function initializePollingService(pollingService: PollingService) {
  return () => pollingService.startPolling();
}

@NgModule({
  // ...其他模块配置（如declarations、imports等）
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializePollingService,
      deps: [PollingService],
      multi: true
    }
  ]
})
export class AppModule {}

3. 组件中使用轮询数据 #

在任意组件中，你可以直接订阅pollData$获取推送的数据：

import { Component, OnInit } from '@angular/core';
import { PollingService } from './polling.service';

@Component({
  selector: 'app-example',
  template: `
    <div *ngIf="latestData">{{ latestData | json }}</div>
  `
})
export class ExampleComponent implements OnInit {
  latestData: any;

  constructor(private pollingService: PollingService) {}

  ngOnInit(): void {
    this.pollingService.pollData$.subscribe(data => {
      this.latestData = data;
      // 这里处理收到的数据逻辑
    });
  }
}

对你原有代码的修复说明 #

1. 添加订阅：必须调用.subscribe()才能触发HTTP请求，冷Observable的特性决定了这一点
2. 错误处理：加入catchError避免单次请求失败导致轮询终止
3. 持续轮询逻辑：无论后端返回空数据还是有效数据，都继续发起下一次请求（符合你描述的后端超时返回空的场景）
4. 封装性：对外暴露pollData$而非直接操作Subject，遵循Angular的单向数据流原则

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