如何从API返回的Promise对象中提取内部数据？

你这段代码已经成功通过地址拿到了经纬度，但在调用OpenWeatherMap API时，只发起了请求却没有处理fetch返回的Promise，所以没法提取到天气数据。另外还要注意，React的setState是异步操作，你在setState之后立刻console.log可能拿不到最新的状态值。

下面是修正后的完整代码，我会把关键步骤标出来：

handleFormSubmit = e => {
  e.preventDefault();
  geocodeByAddress(this.state.address)
    .then(results => getLatLng(results[0]))
    .then(latLng => {
      const { lat, lng } = latLng;
      // 用回调函数确保拿到最新state后再做后续操作
      this.setState({ lat, lng }, () => {
        console.log(this.state.lat, this.state.lng); // 这里能拿到最新值
      });
      // 处理fetch的Promise链，提取天气数据
      fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lng}&appid=${API_KEY}&units=metric`)
        .then(response => {
          // 先检查响应是否成功，避免解析错误
          if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
          }
          return response.json(); // 把响应转成JSON格式
        })
        .then(weatherData => {
          // 这里就能拿到天气数据了，比如打印出来或者存到state里
          console.log('天气数据:', weatherData);
          this.setState({ weather: weatherData });
        })
        .catch(error => {
          // 处理请求或解析过程中的错误
          console.error('获取天气数据失败:', error);
        });
    })
    .catch(error => {
      // 处理地理编码过程中的错误
      console.error('地理编码失败:', error);
    });
};

关键要点说明： #

• 处理fetch的Promise链：fetch返回的Promise需要通过.then()来处理响应，先调用response.json()把响应体转成可操作的JSON对象，之后就能在后续的.then()里拿到天气数据。
• 错误处理：在Promise链的末尾加上.catch()，可以捕获地理编码、API请求、JSON解析过程中出现的任何错误，避免程序崩溃。
• setState的异步特性：如果需要在setState完成后立刻操作最新状态，要使用setState的第二个参数（回调函数），而不是直接在setState后console.log。
• 解构赋值简化代码：用const { lat, lng } = latLng;替代单独声明变量，让代码更简洁。

这样修改后，你就能顺利从OpenWeatherMap API的Promise响应中提取到天气数据啦～

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