Angular页面刷新后读取JSON配置获取后端地址异常求助

看起来你遇到的核心问题是异步加载配置的时序问题：你的initialiseApiRoot方法里通过http.get异步读取JSON配置，但你在其他服务中直接同步访问静态属性apiRootService.apiRoot——这时候配置请求可能还没完成，所以apiRoot还是undefined，最终拼接出错误的接口地址。

下面给你两种可靠的解决方案，推荐第二种，更符合Angular的启动生命周期规范：

方案1：使用Observable让依赖服务等待配置加载完成 #

把配置值改成可观察对象，确保所有依赖它的接口请求都在配置加载完成后执行：

1. 修改ApiRootService #

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'; // 替换废弃的Http
import { BehaviorSubject, Observable, tap } from 'rxjs';
import { apiRoot } from '../model/model.apiRoot';

@Injectable({ providedIn: 'root' })
export class ApiRootService { // 类名遵循大驼峰规范
  private apiRootSubject = new BehaviorSubject<string | null>(null);
  // 对外暴露可观察对象，其他服务订阅它获取配置值
  public apiRoot$: Observable<string | null> = this.apiRootSubject.asObservable();

  constructor(private http: HttpClient) { }

  public initialiseApiRoot(): Observable<apiRoot> {
    return this.http.get<apiRoot>('./assets/apiRoot/apiRoot.json').pipe(
      tap(data => {
        // 请求完成后更新Subject的值
        this.apiRootSubject.next(data.ApiRoot);
      })
    );
  }
}

2. 在业务服务中使用配置 #

比如你的请假列表服务：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ApiRootService } from './api-root.service';
import { switchMap } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class LeaveService {
  constructor(
    private http: HttpClient,
    private apiRootService: ApiRootService
  ) { }

  getlistLeave() {
    // 先订阅配置，拿到值后再发起接口请求
    return this.apiRootService.apiRoot$.pipe(
      switchMap(apiRoot => {
        if (!apiRoot) throw new Error('API配置未加载');
        return this.http.get(`${apiRoot}api/Leave/GetlistLeave`);
      })
    );
  }
}

方案2：使用APP_INITIALIZER在应用启动前加载配置 #

这是更推荐的方案——利用Angular的APP_INITIALIZER令牌，让应用在启动完成前就加载好配置，这样后续所有服务都能直接拿到配置值，不需要处理异步逻辑：

1. 修改ApiRootService #

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { apiRoot } from '../model/model.apiRoot';
import { tap } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ApiRootService {
  public apiRoot: string | null = null; // 实例属性存储配置值

  constructor(private http: HttpClient) { }

  public initialiseApiRoot() {
    return this.http.get<apiRoot>('./assets/apiRoot/apiRoot.json').pipe(
      tap(data => {
        this.apiRoot = data.ApiRoot;
      })
    );
  }
}

2. 在AppModule中配置APP_INITIALIZER #

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http'; // 别忘了引入HttpClientModule
import { AppComponent } from './app.component';
import { ApiRootService } from './services/api-root.service';

// 定义初始化函数：确保配置加载完成后才启动应用
function initApiRoot(apiRootService: ApiRootService) {
  return () => apiRootService.initialiseApiRoot().toPromise();
}

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [
    ApiRootService,
    {
      provide: APP_INITIALIZER,
      useFactory: initApiRoot,
      deps: [ApiRootService],
      multi: true // 允许多个初始化函数
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 在业务服务中直接使用配置 #

现在你可以放心地在其他服务中直接访问配置值，因为应用启动前它已经被加载完成了：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ApiRootService } from './api-root.service';

@Injectable({ providedIn: 'root' })
export class LeaveService {
  constructor(
    private http: HttpClient,
    private apiRootService: ApiRootService
  ) { }

  getlistLeave() {
    const url = `${this.apiRootService.apiRoot}api/Leave/GetlistLeave`;
    return this.http.get(url);
  }
}

额外注意事项 #

• 替换废弃的Http为HttpClient：Angular 4.3+已经废弃了Http，HttpClient自带类型支持、简化的API，是官方推荐的选择。
• 遵循TypeScript命名规范：类名、服务名使用大驼峰（比如ApiRootService），提升代码可读性。

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