模拟慢API演示Async-Await重要性时遇「Http解析失败」问题

我正在使用Dummy APIs演示处理延迟服务器响应时Async-Await的重要性。调用URL https://hub.dummyapis.com/delay?seconds=3后，3秒会收到响应内容「This response has been delayed for 3 seconds」，且网络请求状态为200 OK，但我的Promise始终拒绝。以下是我的代码：

Service代码 #

constructor(private _httpClient: HttpClient) {}

getHeroes(): Observable<any> {
  return this._httpClient.get('https://hub.dummyapis.com/delay?seconds=3');
}

Component TS代码 #

error: string = 'Oops! something went wrong';

async ngOnInit() {
  try {
    let x = await this.fetchData();
    // this.heroes = [...x];
  } catch (error: any) {
    console.log("I've received an error: ", error.message);
  }
}

async fetchData(): Promise<any> {
  return new Promise((resolve, reject) => {
    this._heroListService.getHeroes().subscribe(
      (res: any) => {
        if (typeof res === 'object') {
          resolve(res.text()); // Converting the response in string format
        } else {
          reject(new Error('Invalid response format')); // Reject if the response is not in the expected format
        }
      },
      (error: any) => {
        reject(error); // Reject with the error
      },
      () => {
        console.log('Call complete!');
      }
    );
  });
}

问题根源 #

1. HttpClient响应解析误解：Angular的HttpClient默认会自动解析响应体。当服务器返回纯文本时，HttpClient直接返回字符串类型的响应内容，而非带有text()方法的Response对象。你判断typeof res === 'object'必然不成立，直接触发reject分支。
2. 冗余的Promise包裹：手动用new Promise包裹Observable完全没必要，RxJS提供了更可靠的转换方法，手动实现反而容易引入逻辑错误。

修复方案 #

1. 修改Service（指定响应类型）

constructor(private _httpClient: HttpClient) {}

// 明确指定响应类型为text，避免HttpClient默认尝试解析为JSON
getHeroes(): Observable<string> {
  return this._httpClient.get('https://hub.dummyapis.com/delay?seconds=3', { responseType: 'text' });
}

2. 修改Component逻辑

error: string = 'Oops! something went wrong';

async ngOnInit() {
  try {
    const x = await this.fetchData();
    console.log('响应内容:', x);
    // this.heroes = [...x]; // 根据实际业务逻辑调整数据处理
  } catch (error: any) {
    console.log("I've received an error: ", error.message);
  }
}

// 使用RxJS的firstValueFrom直接将Observable转为Promise
async fetchData(): Promise<string> {
  return firstValueFrom(this._heroListService.getHeroes());
}

补充说明 #

• 指定responseType: 'text'是关键：服务器返回纯文本时，HttpClient默认会尝试按JSON解析，会导致解析错误，明确响应类型可避免此问题。
• firstValueFrom是RxJS专为Observable转Promise设计的API，会自动处理Observable的第一个值和完成事件，比手动包裹Promise更简洁可靠。

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