React Native Expo axios调用天气接口报Unhandled promise rejection: Network Error

问题排查&解决方案 #

1. 核心错误：请求URL缺失协议头

你代码中的接口URL没有添加https://前缀，axios无法识别请求协议，直接触发网络错误。
原代码：

const url = `api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric`;

修正后：

const url = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric`;

2. 异常未捕获导致的unhandled promise rejection报错

你仅在getLocation方法中添加了异常捕获，getWeather内部的异步请求没有做异常处理，请求失败后就会抛出未处理的Promise拒绝报错，补充try/catch即可：

getWeather = async(latitude,longitude) => {
  try {
    const url = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric`;
    const {data: {
        main :{ temp },weather}} = await axios.get(url);
    this.setState({
        isLoading:false,
        temp: temp,
        condition:weather[0].main,});
  } catch (err) {
    console.log('请求天气接口失败：', err)
    Alert.alert('请求失败', '无法获取天气信息')
  }
}

3. 解构使用错误

你已经从axios返回值中解构出了data下的main.temp，后续setState时不需要再写data.main.temp，此时外层作用域没有data变量，运行到此处也会触发报错，直接使用解构出来的temp变量即可。

额外排查项

如果你使用安卓模拟器/真机调试，确保设备和开发电脑处于同一局域网，且设备可以正常访问公网。你可以先把拼接好参数的完整URL复制到手机浏览器中访问，确认可以正常拿到返回数据后再运行项目测试。

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