如何让这个变量等待weather.getWeather()方法中的获取

Question

我创建了一个 Weather 类，其中包含用于从 openweather API 获取地理天气信息的方法。

在我的 Angular 组件中，我尝试调用 .getWeather(cityName) 来获取城市的坐标，然后运行另一个对天气 API 的获取以获取该城市的天气数据。然后所有这些都会传递给我的 displayCurrentWeather 方法，该方法将数据打包得很好。

但是，当从组件类调用 getWeather() 方法并将其分配给变量时，我得到了未定义的结果。

我认为这是一个承诺问题，但我尝试了几种不同的 async/await 变体，但我什么也得不到。

这是我创建的类

export class Weather {
  static displayCurrentWeather(data: {
    temp: number;
    feels_like: number;
    temp_min: number;
    temp_max: number;
    pressure: number;
    humidity: number;
  }) {
    return data;
  }

  static fetchWeatherByCoordinates(coords: {
    latitude: number;
    longitude: number;
  }) {
    fetch(
      `https://api.openweathermap.org/data/2.5/weather?lat=${coords.latitude}&lon=${coords.longitude}&units=imperial&appid=${apikey}`
    )
      .then(function (response) {
        return response.json();
      })
      .then(function (data) {
        console.log(data.main);
        console.log(data.weather);
        Weather.displayCurrentWeather(data.main);
      });
  }

  getWeather(cityName: string) {
    let coords;
    fetch(
      `https://api.openweathermap.org/geo/1.0/direct?q=${cityName}&limit=1&appid=${key}`
    )
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        coords = {
          latitude: data[0].lat,
          longitude: data[0].lon,
        };
        Weather.fetchWeatherByCoordinates(coords);
      });
  }
}

这是我调用此方法的组件类：

export class SearchBar {
  inputValue: string = '';

  fetchWeather() {
    const weather = new Weather();
    let data = weather.getWeather(this.inputValue);  // <---- Data comes back undefined
    console.log('Data ' + data);
  }
}```

Answer 1

代码中几乎没有错误：

1. 您的

   fetchWeatherByCoordinates

   和

   getWeather

   不返回任何值，两者都应该返回

   Promise

   。

2. 回调中同样的事情

   .then()

   ，您正在调用该方法但不返回任何值。

3. 由于修复了上述两点后

   getWeather

   返回的是

   Promise

   ，因此您需要使用

   async

   /

   await

   从

   Promise

   获取值，或者使用

   .then()

   回调。

static fetchWeatherByCoordinates(coords: {
    latitude: number;
    longitude: number;
  }) {
    return fetch(
       `https://api.openweathermap.org/data/2.5/weather?lat=${coords.latitude}&lon=${coords.longitude}&units=imperial&appid=${apikey}`
     )
     .then(function (response) {
       return response.json();
     })
     .then(function (data) {
       console.log(data.main);
       console.log(data.weather);
       return Weather.displayCurrentWeather(data.main);
     })
  );
}

getWeather(cityName: string) {
  let coords;
  return fetch(
      `https://api.openweathermap.org/geo/1.0/direct?q=${cityName}&limit=1&appid=${key}`
    )
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      coords = {
        latitude: data[0].lat,
        longitude: data[0].lon,
      };
      return Weather.fetchWeatherByCoordinates(coords);
    })
  );
}

async fetchWeather() {
  const weather = new Weather();
  let data = await weather.getWeather(this.inputValue);
  console.log('Data ', data);
}

// Or
// fetchWeather() {
//   const weather = new Weather();
//   let data = weather.getWeather(this.inputValue)
//     .then((data: any) => console.log('Data ', data);
// }