Axios捕获HTTP 422错误时仍触发JavaScript错误的问题咨询

我之前也踩过这个坑！你遇到的情况其实是Axios的默认行为导致的——它会把所有HTTP 4xx/5xx状态码的响应都视为Promise拒绝，所以代码会进入catch块，但如果处理不当，浏览器还是会记录未捕获的错误，甚至中断后续代码。下面给你两种解决方案，看哪种更适合你的场景：

方案一：在catch块中正确处理错误，避免重新抛出 #

首先，Axios的错误对象会根据错误类型包含不同属性：

• 当是HTTP错误（比如422）：error.response会存在，包含状态码、响应数据等
• 当是网络错误：error.request会存在（代表发送的请求对象）
• 当是请求配置错误：error.message会给出具体原因

你需要在catch块里明确处理这些情况，不要随意重新抛出错误，否则浏览器会继续记录未捕获的Promise拒绝。示例代码：

this.Axios.post('<api_url>', data)
  .then(function (response) {
    console.log('请求成功:', response);
  })
  .catch(function (error) {
    // 区分处理不同类型的错误
    if (error.response) {
      // 处理422这类HTTP错误
      console.log('服务器返回错误:', error.response.status);
      console.log('错误详情:', error.response.data);
      // 这里可以写你的业务逻辑，比如提示用户表单验证失败
    } else if (error.request) {
      // 处理网络错误（比如断网）
      console.error('未收到服务器响应:', error.request);
    } else {
      // 处理请求配置错误
      console.error('请求配置出错:', error.message);
    }

    // 到这里错误已经被处理，后续代码可以正常执行
    console.log('后续代码继续运行...');
  });

方案二：自定义validateStatus，让4xx状态码进入then块 #

如果你不想把422当成错误处理，而是希望它进入then块，可以通过validateStatus配置项自定义哪些状态码算“成功”的响应。比如：

this.Axios.post('<api_url>', data, {
  // 自定义状态码验证规则：200到499都算成功
  validateStatus: function (status) {
    return status >= 200 && status < 500;
  }
})
  .then(function (response) {
    if (response.status === 422) {
      // 专门处理422的业务逻辑
      console.log('表单验证失败:', response.data);
    } else {
      // 处理正常成功的情况
      console.log('请求成功:', response);
    }
  })
  .catch(function (error) {
    // 这里只处理真正的严重错误（比如5xx或网络错误）
    console.error('请求失败:', error);
  });

为什么会出现控制台错误？ #

大概率是你在catch块里不小心重新抛出了错误（比如写了throw error），或者catch块内部本身有语法/逻辑错误，导致Promise的拒绝状态没有被完全处理。浏览器会把未被捕获的Promise拒绝视为JS错误，进而中断后续代码执行。只要确保catch块正确处理所有错误分支，不随意抛出新错误，问题就能解决。

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