Angular5中基于HttpClient实现轮询获取JSON数据的服务咨询

我来帮你把这个基于Angular 5 HttpClient的轮询功能完整实现并优化，结合RxJS 5.x的特性打造可靠的轮询服务：

完整实现代码 #

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs/Observable';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/operator/takeUntil';
import 'rxjs/add/observable/timer';
import 'rxjs/add/operator/catchError';
import 'rxjs/add/observable/of';

export interface Spot {
  lat: number;
  lng: number;
  spotname: string;
}

@Injectable()
export class SpotService {
  private spotUrl = '<JSON SERVICE URL>';
  // 用于控制轮询停止的Subject
  private stopPolling$ = new Subject<void>();
  // 存储当前轮询获取的spots
  tempSpots: Spot[] = [];

  constructor(private http: HttpClient) {}

  /**
   * 单次获取范围内的spots
   * @param bounds 可选的范围参数，根据你的业务需求调整
   */
  onGetBoundsSpots(bounds?: any): Observable<Spot[]> {
    // 如果需要传递范围参数，这里可以拼接URL或者作为请求参数
    const requestUrl = bounds ? `${this.spotUrl}?bounds=${JSON.stringify(bounds)}` : this.spotUrl;
    
    return this.http.get<Spot[]>(requestUrl)
      .catchError(error => {
        console.error('获取spots失败:', error);
        // 出错时返回空数组或者根据需求自定义处理
        return Observable.of([]);
      });
  }

  /**
   * 启动轮询获取spots
   * @param intervalMs 轮询间隔，默认5000ms（5秒）
   * @param bounds 可选的范围参数
   */
  startPollingBoundsSpots(intervalMs: number = 5000, bounds?: any): Observable<Spot[]> {
    // 先停止之前的轮询（如果存在）
    this.stopPolling();
    
    return Observable.timer(0, intervalMs)
      .mergeMap(() => this.onGetBoundsSpots(bounds))
      .takeUntil(this.stopPolling$)
      .do(spots => {
        // 更新本地存储的spots
        this.tempSpots = spots;
        console.log('轮询更新spots:', spots);
      });
  }

  /**
   * 停止轮询
   */
  stopPolling(): void {
    this.stopPolling$.next();
    this.stopPolling$.complete();
    // 重新创建Subject，方便下次启动轮询
    this.stopPolling$ = new Subject<void>();
  }

关键功能说明 #

• 轮询核心逻辑：用Observable.timer(0, intervalMs)实现立即执行第一次请求，之后每隔指定间隔重复发起请求；mergeMap将定时器的输出转换为HTTP请求流。
• 可控停止：通过takeUntil(this.stopPolling$)监听停止信号，调用stopPolling()方法可随时终止轮询，避免内存泄漏。
• 错误处理：在单次请求中加入catchError，确保某次请求失败不会导致整个轮询流中断，同时可自定义错误处理逻辑。
• 状态维护：通过tempSpots存储最新的spots数据，方便组件直接获取当前状态。
• 灵活配置：支持自定义轮询间隔和范围参数，适配不同业务场景。

组件中使用示例 #

在组件里订阅轮询流，记得在组件销毁时停止轮询：

import { Component, OnDestroy } from '@angular/core';
import { SpotService } from './spot.service';

@Component({
  selector: 'app-spot-viewer',
  template: `...`
})
export class SpotViewerComponent implements OnDestroy {
  constructor(private spotService: SpotService) {
    // 启动轮询，每隔3秒获取一次
    this.spotService.startPollingBoundsSpots(3000)
      .subscribe(spots => {
        // 处理更新后的spots数据
      });
  }

  ngOnDestroy(): void {
    // 组件销毁时停止轮询，防止内存泄漏
    this.spotService.stopPolling();
  }
}

额外优化建议 #

• 防抖/节流：如果范围参数（bounds）会频繁变化，可以在请求前添加节流逻辑，避免短时间内发起过多请求。
• 增量更新：如果后端支持，可以只请求增量数据，减少带宽消耗和处理时间。
• 动态调整间隔：根据请求响应时间动态调整轮询间隔，比如请求慢时延长间隔，请求快时缩短。
• 视觉反馈：在组件中添加加载状态提示，让用户知道轮询正在进行中。

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