如何创建无需重复查询数据库的全局User对象

在Angular中，你可以通过在服务层缓存用户数据的方式，避免每个组件都重复发起数据库查询请求。下面是两种常用的实现方案：

方案一：基础缓存（适合用户数据不频繁变更的场景） #

直接在WeekService中存储已获取的用户数据，后续请求优先返回缓存内容：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { tap } from 'rxjs/operators';
import { User } from './your-user-path'; // 替换为你的User类路径

@Injectable({ providedIn: 'root' }) // 确保服务是单例
export class WeekService {
  serviceURL = "http://localhost:8080";
  private cachedUser: User | null = null; // 缓存用户数据

  constructor(private http: HttpClient) {}

  getUserBack(): Observable<User> {
    // 如果已有缓存，直接返回缓存数据
    if (this.cachedUser) {
      return of(this.cachedUser);
    }
    // 无缓存时发起请求，并缓存结果
    return this.http.get<User>(`${this.serviceURL}/user/1002`, httpOptions).pipe(
      tap(user => this.cachedUser = user) // 将请求结果存入缓存
    );
  }
}

组件中调用方式不变，但后续组件调用getUserBack时会直接使用缓存：

export class WorkReportComponent {
  user: User = new User();

  constructor(private weekService: WeekService) {
    this.weekService.getUserBack().subscribe(data => {
      this.user = data;
    });
  }
}

方案二：响应式缓存（适合用户数据可能动态更新的场景） #

使用BehaviorSubject实现响应式数据流，当用户数据更新时，所有订阅的组件会自动收到最新数据：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, BehaviorSubject, of } from 'rxjs';
import { tap } from 'rxjs/operators';
import { User } from './your-user-path';

@Injectable({ providedIn: 'root' })
export class WeekService {
  serviceURL = "http://localhost:8080";
  private userSubject = new BehaviorSubject<User | null>(null);
  public user$ = this.userSubject.asObservable(); // 暴露给组件的可观察对象

  constructor(private http: HttpClient) {}

  getUserBack(): Observable<User> {
    if (this.userSubject.value) {
      return of(this.userSubject.value);
    }
    return this.http.get<User>(`${this.serviceURL}/user/1002`, httpOptions).pipe(
      tap(user => this.userSubject.next(user)) // 更新数据流
    );
  }

  // 若需要手动更新用户数据（比如编辑后），可添加此方法
  updateUser(user: User): void {
    this.userSubject.next(user);
    // 可选：同时更新数据库
    // this.http.put(`${this.serviceURL}/user/1002`, user).subscribe();
  }
}

组件中可以直接订阅响应式数据流，或使用async管道简化模板：

方式1：手动订阅 #

export class WorkDetailComponent {
  user: User = new User();

  constructor(private weekService: WeekService) {
    // 订阅数据流，自动获取最新用户数据
    this.weekService.user$.subscribe(user => {
      if (user) this.user = user;
    });
    // 首次加载时触发请求（若未缓存）
    this.weekService.getUserBack().subscribe();
  }
}

方式2：使用async管道（推荐，无需手动管理订阅） #

export class WorkDetailComponent {
  user$ = this.weekService.user$; // 直接绑定到响应式数据流

  constructor(private weekService: WeekService) {
    this.weekService.getUserBack().subscribe();
  }
}

模板中使用：

<div *ngIf="user$ | async as user">
  用户名称：{{ user.name }}
</div>

关键说明 #

• 确保WeekService是单例：通过@Injectable({ providedIn: 'root' })声明，保证整个应用中只有一个服务实例，缓存才会生效。
• 缓存失效处理：如果用户数据可能过期，可添加缓存过期逻辑，或提供手动刷新方法（如refreshUser()）重新发起请求并更新缓存。

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