NG5 & RxJS：应用加载时发起Http请求并按需使用返回数据

你提到的问题很典型——要在应用启动时预加载全局数据，确保全应用共享且不重复请求，同时支持同步获取（已加载时）和异步等待（未加载时）。你的思路方向是对的，但直接订阅把Observable变hot的方式确实不够严谨，容易导致重复请求或者数据不一致的问题。下面给你一套标准的实现方案：

核心思路：用单例服务管理全局数据 #

Angular的服务默认是单例的，非常适合用来存储和管理全局共享数据。我们要做的是：

• 在服务里封装Http请求，确保只发起一次
• 把Observable转为共享的Hot Observable，让所有订阅者复用同一次请求结果
• 提供同步获取（缓存数据）和异步订阅两种使用方式
• 可选：用APP_INITIALIZER让应用等待数据加载完成后再启动

具体代码实现 #

1. 创建全局数据服务 #

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

@Injectable({
  providedIn: 'root' // 单例服务
})
export class GlobalDataService {
  // 存储请求的Observable，确保只创建一次
  private data$: Observable<any>;
  // 缓存已加载的数据，用于同步获取
  private cachedData: any;

  constructor(private http: HttpClient) {}

  // 初始化请求：只会发起一次Http请求
  loadData(): Observable<any> {
    if (!this.data$) {
      this.data$ = this.http.get('/your-api-endpoint')
        .pipe(
          // 把请求结果缓存到变量，方便同步获取
          tap(data => this.cachedData = data),
          // 转为共享的Hot Observable，缓存最新1次结果
          // 后续所有订阅者都会直接拿到缓存的结果，不会重复发请求
          shareReplay(1)
        );
    }
    return this.data$;
  }

  // 同步获取已缓存的数据（如果已加载完成）
  getCachedData(): any {
    return this.cachedData;
  }

  // 获取Observable：如果还没加载就触发加载，否则直接返回缓存的Observable
  getData$(): Observable<any> {
    return this.data$ || this.loadData();
  }
}

2. 配置应用初始化时预加载数据 #

如果希望应用在数据加载完成后再启动（这样组件初始化时就能直接拿到数据），可以在AppModule里配置APP_INITIALIZER：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { GlobalDataService } from './global-data.service';

// 初始化函数：返回Promise，让Angular等待数据加载完成
export function initGlobalData(dataService: GlobalDataService) {
  return () => dataService.loadData().toPromise();
}

@NgModule({
  imports: [HttpClientModule],
  providers: [
    GlobalDataService,
    {
      provide: APP_INITIALIZER,
      useFactory: initGlobalData,
      deps: [GlobalDataService],
      multi: true
    }
  ]
})
export class AppModule { }

3. 在组件中使用数据 #

方式一：同步获取（已通过APP_INITIALIZER预加载完成）

import { Component } from '@angular/core';
import { GlobalDataService } from './global-data.service';

@Component({
  selector: 'app-root',
  template: `<h1>当前API地址：{{ globalData?.apiUrl }}</h1>`
})
export class AppComponent {
  globalData: any;

  constructor(private dataService: GlobalDataService) {
    // 因为APP_INITIALIZER已经加载完成，直接拿缓存数据
    this.globalData = dataService.getCachedData();
  }
}

方式二：异步订阅（适合懒加载组件或不确定是否加载完成的场景）

import { Component, OnInit } from '@angular/core';
import { GlobalDataService } from './global-data.service';

@Component({
  selector: 'app-lazy-component',
  template: `<p>配置信息：{{ config?.description }}</p>`
})
export class LazyComponent implements OnInit {
  config: any;

  constructor(private dataService: GlobalDataService) {}

  ngOnInit() {
    // 即使多次订阅，也只会发起一次请求
    this.dataService.getData$().subscribe(data => {
      this.config = data;
    });
  }
}

为什么你的原实现有问题？ #

直接订阅Observable确实会把它变成Hot Observable，但如果没有用shareReplay这类操作符，每次新的订阅都会重新发起一次Http请求。而shareReplay(1)会缓存请求的最新结果，所有后续订阅者都会直接拿到这个缓存值，从根本上避免了重复请求的问题。

另外，用tap缓存数据到变量，能让我们在数据加载完成后直接同步获取，不需要每次都订阅Observable，提升使用体验。

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