Angular11服务变量赋值后后续请求仍重复发起HTTP请求问题

你的代码存在两个核心问题导致重复发起HTTP请求：

1. 冷Observable无缓存机制：projectGuid$在类实例化时就被赋值为API请求的Observable（因为初始projectsGuid为空），而冷Observable每次被订阅都会重新执行请求逻辑，后续每次订阅projectGuid$都会触发新的HTTP请求。
2. 属性初始化仅执行一次：projectGuid$是普通类属性，只会在类实例化时计算一次。即便后续projectsGuid被赋值，projectGuid$也不会重新生成新的Observable，依然指向最初的API请求流。

推荐两种常用解决方式：

方案一：用shareReplay缓存请求结果 #

通过shareReplay(1)操作符缓存API请求的响应结果，确保多个订阅者共享同一次请求的返回值，后续订阅直接读取缓存：

@Injectable({
    providedIn: 'root'
})
export class ProjectGuidService {
    private projectsGuid = '';
    private projectGuidSource$ = this.apiService.get('projects/latest').pipe(
        map(({id}) => id),
        tap(guid => {
            console.log('tap project guid service', guid);
            this.projectsGuid = guid;
        }),
        shareReplay(1) // 缓存最新的1个请求结果
    );

    projectGuid$ = this.projectsGuid !== ''
        ? of(this.projectsGuid)
        : this.projectGuidSource$;

    constructor(
        private apiService: ApiService,
        private appSettingsService: AppSettingsService
    ) {
        console.log('project guid service');
        this.projectsGuid = this.appSettingsService.settings.projectId ?? '';
    }
}

方案二：用BehaviorSubject维护状态 #

通过BehaviorSubject保存当前projectsGuid的状态，既支持初始值赋值，也能在值更新后自动通知订阅者，从根源避免重复请求：

@Injectable({
    providedIn: 'root'
})
export class ProjectGuidService {
    private readonly projectsGuidSubject = new BehaviorSubject<string>('');
    projectGuid$ = this.projectsGuidSubject.asObservable().pipe(
        switchMap(guid => {
            if (guid) {
                return of(guid);
            }
            // 仅当状态为空时发起请求
            return this.apiService.get('projects/latest').pipe(
                map(({id}) => id),
                tap(newGuid => this.projectsGuidSubject.next(newGuid))
            );
        }),
        distinctUntilChanged() // 避免重复发出相同值
    );

    constructor(
        private apiService: ApiService,
        private appSettingsService: AppSettingsService
    ) {
        console.log('project guid service');
        // 初始化状态值
        const initialGuid = this.appSettingsService.settings.projectId ?? '';
        this.projectsGuidSubject.next(initialGuid);
    }
}

• 方案一更适合简单的缓存场景，代码改动量小；
• 方案二更灵活，支持后续主动更新projectsGuid（通过调用this.projectsGuidSubject.next(newValue)），适合需要动态更新状态的业务场景。

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