Angular中如何同步执行HTTP.get请求 等待响应返回后再执行后续代码

现存问题 #

• 混用async/await和.then()写法逻辑冗余，且未处理请求抛出的异常：Angular 的HttpClient.get默认会将4xx、5xx状态码的响应判定为错误，转为Promise后会直接抛出reject，不会进入.then()回调。此时status变量未被赋值，后续status >= 400的判断完全不生效，present会始终返回初始值true，不符合预期。
• 未捕获全局异常：网络断开、请求超时等非接口返回的异常也会导致checkD函数直接抛出错误，外层调用无法拿到布尔返回值。
• 存在冗余代码：声明的res变量从未被使用。

修复后代码 #

方法实现 #

// 导入rxjs工具（Angular 12+ 替换toPromise需要，低版本可省略）
import { firstValueFrom } from 'rxjs';

async checkD(): Promise<boolean> {
    let present: boolean = true;
    try {
        // Angular 11及更低版本用toPromise写法
        // const response = await this.http.get(url,{ headers: header, observe:'response'}).toPromise();
        
        // Angular 12+ 推荐写法，替代废弃的toPromise
        const response = await firstValueFrom(this.http.get(url,{ headers: header, observe:'response'}));
        console.log(response.status);
        if(response.status >= 400) {
          present = false;
        }
    } catch (error) {
        // 所有异常场景统一返回false
        present = false;
    }
    return present;
}

外层调用 #

this.classCheck.checkD()
  .then(present => {
    present ? console.log("Present==true  " + present) : console.log(" Present==false  " + present);
  });

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