天气应用输入无效城市时错误捕获异常，请求技术排查

阿华AIGC实验室

2026-5-14

排查天气应用错误捕获失效的问题

听起来你遇到的问题很典型——API请求相关的错误没被正确捕获，导致后续处理炸了还没给用户任何反馈。我来帮你拆解下可能的原因和解决办法：

可能的问题1：`fetch` 默认不捕获HTTP错误状态码

fetch 只有在网络层面彻底失败（比如断网、域名解析失败）时才会触发reject，像404（城市不存在时API返回的状态）这种HTTP错误，它会正常resolve，但返回的response是不ok的。如果你只在fetch后面加.catch()，这种情况根本进不去catch块，后续处理数据时因为拿到的是空数据或者错误格式，就会报“无法获取属性”的错误。

解决办法：在fetch的第一个then里先判断response状态，手动抛出错误让catch捕获：

fetch(`https://你的天气API地址?city=${输入的城市名}`)
  .then(response => {
    if (!response.ok) {
      // 手动抛出错误，让后续catch能捕获到
      throw new Error(`请求失败：${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    // 处理正常的天气数据，更新UI
    updateWeatherUI(data);
  })
  .catch(error => {
    // 现在网络错误和HTTP错误都会进入这里
    console.error('获取天气失败：', error);
    // 别忘了给用户UI反馈！比如显示“未找到该城市”
    showErrorTip('抱歉，未找到该城市的天气信息，请检查城市名称');
  });

可能的问题2：错误发生在`catch`覆盖范围之外的同步代码里

你说在第97行加了catch，但如果后续处理数据的代码（比如data.weather.temp这种访问深层属性的操作）没有被包裹在try/catch里，或者不在promise的链式调用范围内，那同步代码抛出的错误就不会被这个catch捕获。

比如这种错误写法就会出问题：

// 错误示例：同步代码的错误没被捕获
fetch(...)
  .then(response => response.json())
  .then(data => {
    // 这里如果data是undefined或者没有weather属性，会直接报错，不会进下面的catch
    const temp = data.weather.temp; 
    updateUI(temp);
  })
  .catch(error => {
    console.log(error); // 捕获不到上面同步代码的错误
  });

解决办法：把同步处理代码也包裹在try/catch里，或者用async/await统一捕获所有错误：

// 用async/await更简洁，能统一捕获异步+同步错误
async function getWeather(cityName) {
  try {
    const response = await fetch(`https://你的天气API地址?city=${cityName}`);
    if (!response.ok) throw new Error(`HTTP错误：${response.status}`);
    const data = await response.json();
    // 这里处理数据，哪怕同步出错也会被下面的catch捕获
    const temp = data.weather.temp;
    updateWeatherUI(temp);
  } catch (error) {
    console.error('错误详情：', error);
    showErrorTip('抱歉，无法获取该城市天气，请检查城市名称');
  }
}