Angular中HttpClient订阅在async/await函数返回undefined问题

你的getDataForASpecifiedCity方法大概率是直接在内部调用了HttpClient的subscribe方法，却没有返回Observable对象。await只能等待Promise或遵循thenable协议的对象，要是方法里直接订阅却不返回数据流，方法会默认返回undefined，用await自然拿不到有效数据。

举个典型的错误写法示例：

getDataForASpecifiedCity(city: string) {
  this.http.get(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=你的密钥`)
    .subscribe(data => {
      return data.main.temp;
    });
}

这种写法里，方法没有返回任何有效值，调用时必然得到undefined。

有两种常用修复方式，可根据需求选择：

方式一：让方法返回Observable，在async函数中转Promise等待 #

修改服务方法返回Observable，再在updateTemperaturesForCities中用lastValueFrom()（Angular 12+推荐）将Observable转为Promise，用await等待结果。

1. 调整服务方法：

import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

getDataForASpecifiedCity(city: string): Observable<any> {
  // 返回HttpClient请求的Observable，不要在这里调用subscribe
  return this.http.get(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=你的密钥`);
}

2. 在async函数中调用：

import { lastValueFrom } from 'rxjs';

async updateTemperaturesForCities(cities: string[]) {
  for (const city of cities) {
    try {
      const weatherData = await lastValueFrom(this.landingPageService.getDataForASpecifiedCity(city));
      const temp = weatherData.main.temp;
      // 处理温度数据，比如存入数组或更新页面绑定变量
    } catch (err) {
      // 处理请求错误，比如打印日志或提示用户
      console.error(`获取${city}天气数据失败:`, err);
    }
  }
}

方式二：服务方法直接返回Promise #

如果更习惯Promise写法，可以在服务方法里直接把Observable转为Promise返回：

import { lastValueFrom } from 'rxjs';

getDataForASpecifiedCity(city: string): Promise<any> {
  return lastValueFrom(this.http.get(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=你的密钥`));
}

之后在async函数中直接await调用即可：

async updateTemperaturesForCities(cities: string[]) {
  for (const city of cities) {
    try {
      const weatherData = await this.landingPageService.getDataForASpecifiedCity(city);
      const temp = weatherData.main.temp;
      // 后续数据处理逻辑
    } catch (err) {
      console.error(`获取${city}天气数据失败:`, err);
    }
  }
}

关键注意事项 #

• 服务层尽量不要直接调用subscribe，除非不需要把数据返回给调用方。服务的职责是提供数据流，订阅操作建议放在组件或需要消费数据的层级。
• 必须处理请求错误，避免因单个城市请求失败导致整个流程中断。

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