Angular动态REST客户端：如何将数据重取逻辑迁移至服务？

Short answer: It works for tiny, one-off components, but it's not ideal for scalable apps. Here's why:

• Violates Angular's single-responsibility principle: Components should focus on rendering UI and handling user interactions, not managing data sync logic.
• Creates redundant code: If multiple components need the same data, you'll end up copying the same refetch logic everywhere—even inheritance won't fix this cleanly (it tightens coupling and makes maintenance harder).
• Hard to keep data consistent: Each component might have its own copy of the data, leading to inconsistencies across your app when the remote source updates.

The right approach is to move all data fetching, sync, and state management into an Angular service. Services are singletons by default, so they're perfect for sharing data across components and centralizing logic. We'll use RxJS (which Angular relies on heavily) to handle reactive data streams—this lets components subscribe to updates automatically whenever the remote data changes.

Step 1: Create a Data Sync Service #

Here's a complete example service that handles:

• Fetching initial data from a REST endpoint
• Polling the remote repo at intervals to check for changes
• Emitting updates to all subscribed components
• Manual refresh triggers

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable, interval, switchMap, tap } from 'rxjs';

// Define your data type (replace with your actual model)
interface RemoteData {
  id: string;
  content: string;
  updatedAt: Date;
}

@Injectable({ providedIn: 'root' })
export class DataSyncService {
  // Private subject to hold the current state of data
  private dataSubject = new BehaviorSubject<RemoteData[]>([]);
  // Public observable for components to subscribe to
  public data$: Observable<RemoteData[]> = this.dataSubject.asObservable();

  // Polling interval (in milliseconds—adjust as needed)
  private readonly POLL_INTERVAL = 30000; // 30 seconds

  constructor(private http: HttpClient) {
    // Initialize data on service creation
    this.fetchLatestData().subscribe();
    // Start polling for updates
    this.startPolling();
  }

  // Fetch data from the REST endpoint
  private fetchLatestData(): Observable<RemoteData[]> {
    return this.http.get<RemoteData[]>('/api/remote-data').pipe(
      tap((newData) => {
        // Update the subject with new data if it's different
        const currentData = this.dataSubject.value;
        if (!this.isDataEqual(currentData, newData)) {
          this.dataSubject.next(newData);
        }
      })
    );
  }

  // Start periodic polling to check for updates
  private startPolling(): void {
    interval(this.POLL_INTERVAL)
      .pipe(switchMap(() => this.fetchLatestData()))
      .subscribe();
  }

  // Manual refresh trigger (for user-initiated updates)
  public refreshData(): void {
    this.fetchLatestData().subscribe();
  }

  // Helper to compare data (adjust based on your data structure)
  private isDataEqual(oldData: RemoteData[], newData: RemoteData[]): boolean {
    if (oldData.length !== newData.length) return false;
    return oldData.every((item, index) => {
      return item.id === newData[index].id && item.updatedAt === newData[index].updatedAt;
    });
  }
}

Step 2: Use the Service in Components #

Now any component that needs the data can subscribe to the service's data$ observable—no need to handle fetching or sync logic in the component itself:

import { Component, OnInit } from '@angular/core';
import { DataSyncService } from './data-sync.service';
import { RemoteData } from './data-sync.service';

@Component({
  selector: 'app-data-display',
  template: `
    <div *ngFor="let item of data">
      <h3>{{ item.content }}</h3>
      <p>Updated: {{ item.updatedAt | date }}</p>
    </div>
    <button (click)="refresh()">Refresh Manually</button>
  `
})
export class DataDisplayComponent implements OnInit {
  data: RemoteData[] = [];

  constructor(private dataSyncService: DataSyncService) {}

  ngOnInit(): void {
    // Subscribe to data updates
    this.dataSyncService.data$.subscribe((newData) => {
      this.data = newData;
    });
  }

  // Trigger manual refresh
  refresh(): void {
    this.dataSyncService.refreshData();
  }
}

Bonus: Better Than Polling—Use WebSockets (If Backend Supports) #

If your remote repo/backend supports WebSockets or webhooks, you can replace polling with real-time updates for better performance. Here's a quick modification to the service to use WebSockets:

// Add this to the DataSyncService constructor
private connectWebSocket(): void {
  const socket = new WebSocket('ws://your-backend-url/ws/data-updates');
  
  socket.onmessage = (event) => {
    const newData = JSON.parse(event.data) as RemoteData[];
    this.dataSubject.next(newData);
  };

  socket.onerror = (error) => {
    console.error('WebSocket error:', error);
    // Reconnect after a delay if needed
    setTimeout(() => this.connectWebSocket(), 5000);
  };
}

Then call this.connectWebSocket() in the constructor instead of this.startPolling().

• Code reuse: All sync logic lives in one place—no more copying and pasting.
• Consistent data: Every component gets the same up-to-date data.
• Separation of concerns: Components focus on UI, service handles data logic.
• Easy maintenance: If you need to change how you detect updates (e.g., switch from polling to WebSockets), you only modify the service.

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