Angular 13库初始化加载HTTP配置文件解决竞态条件方案咨询

我们把后端基础URL存在外部配置文件中，所有请求都需要读取这个文件。当前的实现是在服务构造函数里订阅envService.getEnv来初始化apiUrlBase，但存在竞态问题——调用get方法时apiUrlBase可能还没初始化，导致请求地址无效。

当前代码实现：

// 从配置文件获取URL
// getEnv用了share()，多次调用也只会加载一次，但需要在请求后端前确保已加载
constructor(private http: HttpClient, private envService: EnvironmentService) {
    this.envService.getEnv('baseUrl').subscribe({
      next: (apiUrl) => {
        this.apiUrlBase = `${apiUrl}${someSufix}`;
      },
    });
  }

// 存在apiUrlBase未初始化导致请求无效的风险
get(x: string): Observable<someData> {
    return this.http.get<someData>(`${this.apiUrlBase}${x}`);
}

目前我们用以下方式规避，但不想在每个请求里重复写这段逻辑：

// getEnv使用了.pipe(share())
this.environmentService.getEnv('baseUrl').pipe(
  mergeMap(apiUrlBase => this.http.get<someData>(`${apiUrlBase}${x}`))
)

我们使用Angular 13，上述逻辑在自定义库中，希望在库的构造函数层面处理，得到更优的实现方案。

优化方案 #

方案1：缓存URL的Observable（推荐）

在服务内部提前创建并缓存带后缀的URL Observable，利用shareReplay(1)确保只加载一次配置，后续所有请求都基于这个Observable发起，避免重复代码：

@Injectable({ providedIn: 'root' })
export class YourApiService {
  private apiUrlBase$: Observable<string>;

  constructor(private http: HttpClient, private envService: EnvironmentService) {
    // 提前获取并缓存带后缀的URL，shareReplay(1)确保结果被缓存，后续订阅直接取缓存值
    this.apiUrlBase$ = this.envService.getEnv('baseUrl').pipe(
      map(apiUrl => `${apiUrl}${someSufix}`),
      shareReplay(1)
    );
  }

  get(x: string): Observable<someData> {
    return this.apiUrlBase$.pipe(
      mergeMap(apiUrlBase => this.http.get<someData>(`${apiUrlBase}${x}`))
    );
  }
}

这样所有请求都会等待URL就绪后再执行，且配置文件只会被请求一次，同时不用在每个请求里重复写mergeMap逻辑。

方案2：用APP_INITIALIZER预加载配置

如果要求应用启动前必须加载完配置，可使用Angular的APP_INITIALIZER在应用启动阶段提前加载配置，这样服务构造函数里就能同步拿到URL：

1. 先在库的模块中配置初始化器：

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { EnvironmentService } from './environment.service';

// 初始化函数：加载配置文件
function initializeApp(envService: EnvironmentService) {
  return () => envService.getEnv('baseUrl').toPromise();
}

@NgModule({
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeApp,
      deps: [EnvironmentService],
      multi: true
    }
  ]
})
export class YourLibraryModule { }

2. 修改EnvironmentService增加同步获取方法，存储已加载的配置值：

@Injectable({ providedIn: 'root' })
export class EnvironmentService {
  private envCache: Record<string, any> = {};

  getEnv(key: string): Observable<any> {
    return this.http.get('/assets/config.json').pipe(
      share(),
      tap(env => this.envCache[key] = env[key])
    );
  }

  getEnvSync(key: string): any {
    return this.envCache[key];
  }
}

3. 最后修改API服务：

@Injectable({ providedIn: 'root' })
export class YourApiService {
  private apiUrlBase: string;

  constructor(private http: HttpClient, private envService: EnvironmentService) {
    // 因APP_INITIALIZER已加载完配置，可同步获取
    this.apiUrlBase = `${this.envService.getEnvSync('baseUrl')}${someSufix}`;
  }

  get(x: string): Observable<someData> {
    return this.http.get<someData>(`${this.apiUrlBase}${x}`);
  }
}

注意：这种方式会延长应用启动时间，直到配置加载完成才会渲染页面。

方案3：封装通用请求方法

如果需要支持多种HTTP方法（GET/POST/PUT等），可以封装通用请求方法，把URL获取逻辑统一放在里面：

@Injectable({ providedIn: 'root' })
export class YourApiService {
  private apiUrlBase$: Observable<string>;

  constructor(private http: HttpClient, private envService: EnvironmentService) {
    this.apiUrlBase$ = this.envService.getEnv('baseUrl').pipe(
      map(apiUrl => `${apiUrl}${someSufix}`),
      shareReplay(1)
    );
  }

  // 通用GET方法
  private getRequest<T>(path: string): Observable<T> {
    return this.apiUrlBase$.pipe(
      mergeMap(baseUrl => this.http.get<T>(`${baseUrl}${path}`))
    );
  }

  // 通用POST方法
  private postRequest<T>(path: string, body: any): Observable<T> {
    return this.apiUrlBase$.pipe(
      mergeMap(baseUrl => this.http.post<T>(`${baseUrl}${path}`, body))
    );
  }

  // 具体业务接口
  getSomeData(x: string): Observable<someData> {
    return this.getRequest<someData>(x);
  }

  submitData(body: any): Observable<submitResult> {
    return this.postRequest<submitResult>('/submit', body);
  }
}

这样所有业务接口只需要调用对应的通用方法，不用重复处理URL逻辑。

内容的提问来源于stack exchange，提问作者Jakub Šmiga