使用try catch无法捕获axios请求返回的404错误该如何处理

现有代码的核心错误 #

• 同步try/catch无法捕获异步Promise抛出的异常：axios.get返回Promise属于异步逻辑，外层同步try块监听不到Promise内部的reject状态，因此404错误会触发Uncaught (in promise)提示。
• 作用域错误：response变量仅存在于then的回调函数作用域内，外部catch块无法访问该变量，会触发未定义报错。
• 冗余的await操作：response.data是axios返回的同步属性，不需要用await等待。
• 非2xx状态码不会进入then回调：axios默认配置下，HTTP状态码不在2xx范围会直接触发Promise reject，你写在then里的状态码判断逻辑在404场景下根本不会执行。

修复代码示例 #

方案1：async/await搭配try/catch（推荐，逻辑更清晰） #

async function fetchWeather(city, api_key) {
  try {
    const response = await axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${api_key}`)
    const data = response.data
    console.log(data)
    document.getElementById('hum').textContent = data.main.humidity;
    document.getElementById('feels-like').textContent = data.main.feels_like;
  } catch (error) {
    // 所有异常都会进入该分支
    if (error.response?.status === 404) {
      // 此处可添加用户提示逻辑，比如弹窗提示城市不存在
      console.log('输入的城市不存在，请检查拼写')
    } else {
      console.log(`请求出错：${error.message}`)
    }
  }
}

方案2：Promise链式调用写法 #

axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${api_key}`)
  .then(response => {
    const data = response.data
    console.log(data)
    document.getElementById('hum').textContent = data.main.humidity;
    document.getElementById('feels-like').textContent = data.main.feels_like;
  })
  .catch(error => {
    if (error.response?.status === 404) {
      console.log('输入的城市不存在，请检查拼写')
    } else {
      console.log(`请求出错：${error.message}`)
    }
  })

补充说明 #

如果需要自定义状态码校验规则，让非2xx的状态码也进入then回调，可以配置axios的validateStatus参数：

axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${api_key}`, {
  // 状态码小于500都判定为请求成功，进入then回调
  validateStatus: status => status < 500
})

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