在componentDidMount中获取地理位置并发送Ajax请求遇异步问题求助

嘿，我来帮你理清问题所在，然后给出可行的解决方案～

问题核心分析 #

你对componentDidMount的执行时机理解有误：这个生命周期方法只会在组件第一次挂载完成后执行一次，后续通过setState触发的重渲染，不会再次调用componentDidMount。这就是为什么你设置了uri后，fetch代码永远没机会执行的原因。另外，setState本身是异步操作，你在setState后立刻console.log(this.state.uri)也拿不到最新值，这也是一个小坑。

修正方案1：直接在定位回调中发起请求 #

最直接的方式是，在地理定位成功的回调里，直接拼接API地址并发起fetch请求，不需要依赖state存储uri来触发后续操作：

state = { 
  data: "Please wait while your weather is loading...",
}

componentDidMount() {
  // 调用地理定位API
  navigator.geolocation.getCurrentPosition(
    // 定位成功回调
    (pos) => {
      // 拼接天气API地址
      const weatherApiUri = `https://api.wunderground.com/api/{API GOES HERE}/conditions/q/${pos.coords.latitude},${pos.coords.longitude}.json`;
      
      // 发起API请求
      fetch(weatherApiUri)
        .then(res => res.json())
        .then(data => {
          this.setState({
            data: {
              tempString: data.current_observation.temperature_string,
              realTemp: data.current_observation.feelslike_string,
              // 简化字符串替换逻辑
              skyImg: data.current_observation.icon_url.replace(/^(.{4})/, '$1s'),
              location: data.current_observation.display_location.full,
              temp_f: data.current_observation.temp_f,
            }
          });
        })
        .catch(err => {
          console.log(err.message);
          this.setState({ data: '加载天气信息失败，请稍后重试' });
        });
    },
    // 定位失败回调（一定要处理这个情况！）
    (err) => {
      console.error('定位失败:', err.message);
      this.setState({ data: '无法获取您的位置，无法加载天气信息' });
    }
  );
}

修正方案2：用Promise+async/await优化异步流程 #

如果想让代码逻辑更清晰、可读性更强，可以把地理定位API封装成Promise，再用async/await来处理异步流程：

state = { 
  data: "Please wait while your weather is loading...",
}

// 封装地理定位为Promise
getCurrentLocation = () => {
  return new Promise((resolve, reject) => {
    navigator.geolocation.getCurrentPosition(resolve, reject);
  });
}

async componentDidMount() {
  try {
    // 获取定位信息
    const pos = await this.getCurrentLocation();
    // 拼接API地址
    const weatherApiUri = `https://api.wunderground.com/api/{API GOES HERE}/conditions/q/${pos.coords.latitude},${pos.coords.longitude}.json`;
    // 发起请求并解析数据
    const res = await fetch(weatherApiUri);
    const data = await res.json();
    
    // 更新状态
    this.setState({
      data: {
        tempString: data.current_observation.temperature_string,
        realTemp: data.current_observation.feelslike_string,
        skyImg: data.current_observation.icon_url.replace(/^(.{4})/, '$1s'),
        location: data.current_observation.display_location.full,
        temp_f: data.current_observation.temp_f,
      }
    });
  } catch (err) {
    console.error('出错了:', err.message);
    this.setState({ data: '加载天气信息失败，请稍后重试' });
  }
}

额外注意点 #

1. 务必处理定位失败的情况（比如用户拒绝授权、设备不支持定位），否则页面会一直停留在加载状态；
2. setState是异步操作，不要在setState后立刻依赖this.state的新值，优先用变量存储中间结果；
3. 顺手修正了你代码里的小拼写错误：you're weather → your weather。

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