在构造函数中使用async设置变量值的异步问题求助

问题根源 #

HTTP请求是异步操作，subscribe的回调函数会在请求成功后才执行，但你当前的url1、url2赋值是同步代码，会在请求完成前就执行，此时urlserveur还未被赋值，最终得到的是undefined + 'list/'这类无效值。

解决方案1：将依赖赋值移到异步回调内 #

把url1和url2的赋值逻辑放到subscribe的回调函数里，确保只有在拿到serverIP后才生成完整URL：

urlserveur!: string;
url1!: string;
url2!: string;

public getJSON(): Observable<any> {
  return this.http.get("assets/serveur.json");
}

constructor(private http: HttpClient) {
  this.getJSON().subscribe(data => {
    this.urlserveur = data.serverIP;
    // 在这里赋值url1和url2
    this.url1 = this.urlserveur + 'list/';
    this.url2 = this.urlserveur + 'insert';
    // 所有依赖这些URL的后续逻辑，都要放到这里执行
  });
}

解决方案2：使用async/await结合生命周期钩子 #

构造函数不能标记为async，可以把异步逻辑移到ngOnInit生命周期钩子中，将Observable转为Promise后使用await等待请求完成：

import { firstValueFrom } from 'rxjs'; // Angular 12+推荐使用firstValueFrom

urlserveur!: string;
url1!: string;
url2!: string;

public getJSON(): Observable<any> {
  return this.http.get("assets/serveur.json");
}

constructor(private http: HttpClient) {}

async ngOnInit(): Promise<void> {
  const data = await firstValueFrom(this.getJSON());
  this.urlserveur = data.serverIP;
  this.url1 = this.urlserveur + 'list/';
  this.url2 = this.urlserveur + 'insert';
  // 后续依赖URL的逻辑在这里执行
}

额外建议 #

• 可以给urlserveur设置一个默认值（比如空字符串或测试环境地址），避免未加载完成时出现undefined相关错误。
• 如果组件模板中依赖这些URL（比如调用API的按钮），可以通过*ngIf="url1"控制元素渲染，确保URL准备好后再显示相关内容，避免报错。

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