Angular技术问询：是否需为每个实体创建服务及合并方案

1. 是否应为所有实体的HTTP请求都创建本地状态？是否要为每个实体单独建服务？ #

不是所有实体都适合做本地缓存，得看数据特性：

• 适合缓存的场景：
  • 静态/极少更新的数据：比如系统字典、设施基础配置，这类数据短时间内不会变动，缓存后能大幅减少重复请求，加快页面加载速度。
  • 用户核心信息：登录后的用户基本资料，一般不会频繁改动，缓存后不用每次接口都拉取。
• 不适合缓存的场景：
  • 高频实时更新的数据：比如订单状态、实时库存、交易数据，这类数据时效性极强，本地缓存会导致数据和服务器不一致，必须每次请求最新数据。

至于服务拆分，按实体单独创建服务是更合理的选择，遵循单一职责原则：

• 每个服务只负责对应实体的API调用、状态维护，代码逻辑清晰，出问题时能快速定位。
• 降低模块耦合，修改某个实体的逻辑不会影响其他实体的服务。
• 便于团队协作，不同开发人员可以负责不同实体的服务开发。

2. 如何实现共享服务来复用通用逻辑？ #

不建议把所有实体的业务逻辑硬塞进一个服务（会导致服务臃肿、难以维护），但可以通过封装基础通用服务，让实体服务复用通用能力（比如自动加token、通用请求逻辑），同时各自维护自己的本地状态。

方案1：封装基础HTTP服务（推荐） #

先写一个基础服务，封装token添加、通用请求逻辑：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from '../environments/environment';

@Injectable({ providedIn: 'root' })
export class BaseHttpService {
  // 用getter确保每次请求都能拿到最新的token
  protected get httpOptions() {
    const user = JSON.parse(localStorage.getItem('user') || '{}');
    return {
      headers: new HttpHeaders({
        Authorization: `bearer ${user.token || ''}`
      })
    };
  }

  constructor(protected http: HttpClient) {}

  // 封装通用GET请求
  protected get<T>(url: string): Observable<T> {
    return this.http.get<T>(`${environment.rootUrl}/${url}`, this.httpOptions);
  }

  // 可按需封装post、put、delete等通用方法
}

然后实体服务继承这个基础服务，同时维护自己的本地状态：

import { Injectable } from '@angular/core';
import { BaseHttpService } from './base-http.service';
import { of, Observable } from 'rxjs';
import { map } from 'rxjs/operators';

// 定义实体类型
interface Facility {
  id: number;
  name: string;
}

@Injectable({ providedIn: 'root' })
export class FacilityService extends BaseHttpService {
  private facilities: Facility[] = [];

  load(): Observable<Facility[]> {
    // 本地有数据直接返回副本，避免外部修改内部状态
    if (this.facilities.length > 0) {
      return of([...this.facilities]);
    }
    return this.get<Facility[]>('facility/getFacility').pipe(
      map(data => {
        this.facilities = data;
        return [...this.facilities];
      })
    );
  }
}

方案2：单一共享状态服务（适合小型项目） #

如果项目规模很小，想把所有实体状态放在一个服务里，可以用RxJS的BehaviorSubject管理不同实体的状态：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { BehaviorSubject, Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';
import { environment } from '../environments/environment';

// 定义全局状态结构
interface AppState {
  facilities: any[];
  users: any[];
  orders: any[];
}

@Injectable({ providedIn: 'root' })
export class SharedDataService {
  private stateSubject = new BehaviorSubject<AppState>({
    facilities: [],
    users: [],
    orders: []
  });
  private state = this.stateSubject.value;

  private get httpOptions() {
    const user = JSON.parse(localStorage.getItem('user') || '{}');
    return {
      headers: new HttpHeaders({
        Authorization: `bearer ${user.token || ''}`
      })
    };
  }

  constructor(private http: HttpClient) {}

  // 设施加载逻辑
  loadFacilities(): Observable<any[]> {
    if (this.state.facilities.length > 0) {
      return of([...this.state.facilities]);
    }
    return this.http.get<any[]>(`${environment.rootUrl}/facility/getFacility`, this.httpOptions).pipe(
      map(data => {
        this.state.facilities = data;
        this.stateSubject.next({ ...this.state });
        return [...data];
      })
    );
  }

  // 用户加载逻辑
  loadUsers(): Observable<any[]> {
    if (this.state.users.length > 0) {
      return of([...this.state.users]);
    }
    return this.http.get<any[]>(`${environment.rootUrl}/user/getUsers`, this.httpOptions).pipe(
      map(data => {
        this.state.users = data;
        this.stateSubject.next({ ...this.state });
        return [...data];
      })
    );
  }

  // 可按需添加订单等其他实体的加载方法
}

注意：这种方案在项目规模变大后会导致服务臃肿，不利于维护，因此更推荐方案1。

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