Angular HTTP Client如何仅从服务器获取一次数据

给你几个实用的方案，完美解决重复请求和已修改状态被覆盖的问题：

方案一：服务中用BehaviorSubject维护缓存+可更新状态 #

这是最直观的非NgRx方案，在单例服务里把数据存在BehaviorSubject中，首次请求后填充缓存，后续直接返回缓存的可观察对象，同时提供更新方法让组件修改状态。

服务实现： #

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { Ingredient } from './ingredient.model';

@Injectable({ providedIn: 'root' })
export class ShoppingService {
  // 用BehaviorSubject存储当前最新的食材数据，初始值为空数组
  private ingredientsSubject = new BehaviorSubject<Ingredient[]>([]);
  // 对外暴露只读的Observable，避免外部直接修改Subject
  public ingredients$ = this.ingredientsSubject.asObservable();
  // 标记是否已经加载过数据
  private isLoaded = false;

  constructor(private http: HttpClient) {}

  getIngredients(): Observable<Ingredient[]> {
    // 仅当未加载过时才发起请求
    if (!this.isLoaded) {
      this.http.get<Ingredient[]>('/api/ingredients').subscribe({
        next: (fetchedIngredients) => {
          // 将请求到的数据存入Subject，所有订阅者都会收到更新
          this.ingredientsSubject.next(fetchedIngredients);
          this.isLoaded = true;
        },
        error: () => {
          // 请求失败时重置标记，允许后续重试
          this.isLoaded = false;
        }
      });
    }
    // 返回缓存的Observable
    return this.ingredients$;
  }

  // 提供方法让组件修改数据，更新Subject中的状态
  updateIngredients(updatedIngredients: Ingredient[]) {
    this.ingredientsSubject.next(updatedIngredients);
  }
}

组件使用： #

ngOnInit(): void {
  // 订阅缓存的Observable，首次加载会发请求，后续直接拿缓存
  this.shoppingService.ingredients$.subscribe(ingredients => {
    this.ingredients = ingredients;
  });

  // 或者用async管道更简洁，自动管理订阅
  // this.ingredients$ = this.shoppingService.ingredients$;
}

// 用户修改数据时调用服务的更新方法
onIngredientModified(updated: Ingredient[]) {
  this.shoppingService.updateIngredients(updated);
}

方案二：NgRx中用条件Effect控制请求 #

如果你用NgRx管理状态，可以在Effect中判断状态是否已加载，仅当未加载时才发起请求，同时通过Reducer处理数据更新，完全避免重复请求和状态覆盖。

1. 定义状态与选择器 #

import { createFeature, createSelector, createReducer, on } from '@ngrx/store';
import * as ShoppingActions from './shopping.actions';
import { Ingredient } from './ingredient.model';

export interface ShoppingState {
  ingredients: Ingredient[];
  loaded: boolean; // 标记是否已加载数据
}

const initialState: ShoppingState = {
  ingredients: [],
  loaded: false
};

const shoppingFeature = createFeature({
  name: 'shopping',
  reducer: createReducer(
    initialState,
    on(ShoppingActions.loadIngredientsSuccess, (state, { ingredients }) => ({
      ...state,
      ingredients,
      loaded: true
    })),
    on(ShoppingActions.updateIngredients, (state, { ingredients }) => ({
      ...state,
      ingredients
    }))
  )
});

// 导出选择器
export const {
  selectShoppingState,
  selectIngredients,
  selectLoaded
} = shoppingFeature;

2. 编写条件Effect #

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { HttpClient } from '@angular/common/http';
import { of } from 'rxjs';
import { map, switchMap, withLatestFrom, filter } from 'rxjs/operators';
import * as ShoppingActions from './shopping.actions';
import { Store } from '@ngrx/store';
import { selectLoaded } from './shopping.selectors';

@Injectable()
export class ShoppingEffects {
  loadIngredients$ = createEffect(() => 
    this.actions$.pipe(
      ofType(ShoppingActions.loadIngredients),
      // 结合当前状态的loaded标记
      withLatestFrom(this.store.select(selectLoaded)),
      // 仅当未加载过时才继续执行请求
      filter(([_, loaded]) => !loaded),
      switchMap(() => 
        this.http.get<Ingredient[]>('/api/ingredients').pipe(
          map(ingredients => ShoppingActions.loadIngredientsSuccess({ ingredients })),
          catchError(err => of(ShoppingActions.loadIngredientsFailure({ error: err.message })))
        )
      )
    )
  );

  constructor(
    private actions$: Actions,
    private http: HttpClient,
    private store: Store
  ) {}
}

3. 组件中使用 #

ngOnInit(): void {
  // 不管调用多少次dispatch，Effect都会判断是否已加载
  this.store.dispatch(ShoppingActions.loadIngredients());
  // 订阅状态中的食材数据
  this.ingredients$ = this.store.select(selectIngredients);
}

// 修改数据时dispatch更新action
onIngredientModified(updated: Ingredient[]) {
  this.store.dispatch(ShoppingActions.updateIngredients({ ingredients: updated }));
}

方案三：RxJS shareReplay结合本地更新（进阶） #

如果想用shareReplay但不想覆盖已修改状态，可以把远程请求和本地更新合并，用scan操作符保留本地修改后的状态：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, Subject, merge, scan } from 'rxjs';
import { shareReplay } from 'rxjs/operators';
import { Ingredient } from './ingredient.model';

@Injectable({ providedIn: 'root' })
export class ShoppingService {
  // 触发远程请求的Subject（首次自动触发）
  private refresh$ = new Subject<void>();
  // 接收本地更新的Subject
  private localUpdates$ = new Subject<Ingredient[]>();

  // 合并远程请求和本地更新，用scan保留本地状态
  public ingredients$: Observable<Ingredient[]> = merge(
    // 首次加载发起请求，shareReplay缓存请求结果
    this.refresh$.pipe(
      startWith(void 0),
      switchMap(() => this.http.get<Ingredient[]>('/api/ingredients')),
      shareReplay(1)
    ),
    this.localUpdates$
  ).pipe(
    scan((currentIngredients, newData) => {
      // 如果是远程返回的初始数据，且当前无数据则替换；否则用本地更新
      return currentIngredients.length === 0 ? newData : newData;
    }, [])
  );

  constructor(private http: HttpClient) {}

  getIngredients(): Observable<Ingredient[]> {
    return this.ingredients$;
  }

  updateIngredients(updated: Ingredient[]) {
    this.localUpdates$.next(updated);
  }
}

这三个方案里，方案一适合中小型项目，简单易维护；方案二更适合大型项目的NgRx状态管理场景；方案三是RxJS进阶用法，适合喜欢用纯RxJS处理状态的场景。

内容的提问来源于stack exchange，提问作者Ahmed-El-Bald