Angular 5中如何阻止重复HTTP请求的提交？

Hey there! Let's dig into this duplicate HTTP call issue you're hitting with Angular 5—totally get how annoying it is when static reference data keeps pinging the backend unnecessarily, especially when you’ve already tried shareReplay and basic caching. Let’s break down what might be going wrong and fix it step by step.

First: The Common shareReplay Pitfall #

If you’re calling a service method that returns a new Observable every time (like wrapping http.get() in the method itself), shareReplay won’t help because each call creates a fresh stream. For example, this won’t work:

// ❌ Bad: Each call creates a new Observable
getReferenceData() {
  return this.http.get('/api/reference-data').pipe(shareReplay(1));
}

Every component that calls this method gets a separate stream, so each subscription triggers a new HTTP request.

Fix: Cache the Observable Instance #

The solution is to store the Observable as a property in your service, so all components subscribe to the same stream. Here’s how to do it right:

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, shareReplay, catchError, throwError, of } from 'rxjs';
import { tap } from 'rxjs/operators';

interface ReferenceData {
  // Define your data structure here
}

@Injectable()
export class ReferenceDataService {
  private referenceDataCache$: Observable<ReferenceData> | null = null;

  constructor(private http: HttpClient) {}

  getReferenceData(): Observable<ReferenceData> {
    // Only create the Observable if it doesn't exist yet
    if (!this.referenceDataCache$) {
      this.referenceDataCache$ = this.http.get<ReferenceData>('/api/reference-data').pipe(
        shareReplay(1), // Cache the most recent value for future subscribers
        tap(data => console.log('Fetched reference data once')),
        catchError((error: HttpErrorResponse) => {
          // Clear cache on error so next call tries again
          this.referenceDataCache$ = null;
          return throwError(() => new Error('Failed to load reference data'));
        })
      );
    }
    return this.referenceDataCache$;
  }
}

Now, no matter how many components subscribe to getReferenceData(), the HTTP call will only fire once—all subsequent subscriptions get the cached value from shareReplay.

Bonus: Add LocalStorage Persistence (For Longer-Lived Caching) #

Since your reference data rarely changes, you can extend this to persist the data in localStorage so it survives page refreshes:

getReferenceData(): Observable<ReferenceData> {
  if (!this.referenceDataCache$) {
    // Check local storage first
    const cachedData = localStorage.getItem('referenceData');
    if (cachedData) {
      this.referenceDataCache$ = of(JSON.parse(cachedData)).pipe(shareReplay(1));
      return this.referenceDataCache$;
    }

    // If no local cache, fetch from API
    this.referenceDataCache$ = this.http.get<ReferenceData>('/api/reference-data').pipe(
      tap(data => localStorage.setItem('referenceData', JSON.stringify(data))),
      shareReplay(1),
      catchError(error => {
        this.referenceDataCache$ = null;
        localStorage.removeItem('referenceData');
        return throwError(() => error);
      })
    );
  }
  return this.referenceDataCache$;
}

Testing This with Jasmine #

To verify that only one HTTP request is made, here’s how to set up your test:

import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { ReferenceDataService } from './reference-data.service';

describe('ReferenceDataService', () => {
  let service: ReferenceDataService;
  let httpTestingController: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [ReferenceDataService]
    });
    service = TestBed.inject(ReferenceDataService);
    httpTestingController = TestBed.inject(HttpTestingController);
  });

  afterEach(() => {
    // Ensure no leftover HTTP requests
    httpTestingController.verify();
  });

  it('should make only one HTTP request when subscribed multiple times', () => {
    // Subscribe twice
    service.getReferenceData().subscribe();
    service.getReferenceData().subscribe();

    // Expect only one request to be sent
    const req = httpTestingController.expectOne('/api/reference-data');
    expect(req.request.method).toBe('GET');
    
    // Flush mock data to complete the requests
    req.flush({ mock: 'data' });
  });
});

Key Takeaway #

The core issue was likely that you weren’t reusing the same Observable instance. By caching the Observable itself (not just the data), shareReplay can do its job and prevent duplicate calls. This approach works seamlessly with Angular 5 and ensures your static reference data is fetched only once.

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