使用Axios的then/catch语法分别捕获4xx与代码错误及行为差异咨询

嘿，这个问题问得非常好——很多人刚从fetch转Axios的时候都会被两者的错误处理逻辑搞懵，我来一步步给你捋清楚。

首先说核心问题：怎么用Axios的then/catch分别捕获4xx错误和代码错误，然后再解释你疑惑的fetch与Axios的行为差异。

一、Axios捕获4xx和代码错误的两种方式 #

Axios的默认行为和fetch有个关键区别：Axios会把4xx、5xx这类HTTP错误（比如404、401）直接当成Promise的reject状态，而不像fetch那样把它们当成resolve。所以我们可以很方便地在catch里区分不同错误类型：

方式1：用默认配置，在catch里区分错误类型 #

Axios的错误对象会带不同的属性来标识错误类型，我们可以靠这个区分：

• 有response属性：说明是HTTP错误（服务器返回了4xx/5xx响应）
• 有request属性：说明是网络错误（请求发出去了，但没收到响应）
• 没有这两个属性：说明是代码错误（比如then里抛出的异常、变量未定义等）

示例代码：

axios.get('/api/user/profile')
  .then(response => {
    // 这里只有2xx的成功响应才会进来
    console.log('拿到用户数据:', response.data);
    // 模拟一段会出错的代码
    const undefinedVar = nonExistentFunction();
  })
  .catch(error => {
    if (error.response) {
      // 捕获4xx/5xx的HTTP错误
      console.error(`HTTP错误 ${error.response.status}:`, error.response.data);
    } else if (error.request) {
      // 捕获网络错误（比如断网、跨域被阻止）
      console.error('网络请求失败:', error.message);
    } else {
      // 捕获代码错误或者请求配置错误
      console.error('代码/配置出错:', error.message);
    }
  });

方式2：修改配置，让4xx进入then处理（和fetch一致） #

如果你习惯了fetch的逻辑，想让4xx响应进入then，只需要配置validateStatus选项，自定义哪些状态码算成功：

axios.get('/api/user/profile', {
  // 让所有200及以上的状态都算成功（包括4xx）
  validateStatus: status => status >= 200
})
.then(response => {
  // 手动判断是否是4xx错误
  if (response.status >= 400 && response.status < 500) {
    console.error('4xx错误:', response.data);
    return;
  }
  // 处理正常响应
  console.log('成功拿到数据:', response.data);
  // 代码错误会被下面的catch捕获
  nonExistentFunction();
})
.catch(error => {
  // 这里只捕获网络错误和代码错误
  console.error('出错了:', error.message);
});

二、为什么Axios和fetch的行为不同？你说的两种写法差异是怎么回事？ #

先纠正一个关键点：你提到的fetch两种写法的差异，其实是Promise本身的通用特性，不是fetch独有的，Axios完全遵循同样的规则。我们拆开来解释：

1. Axios和fetch的核心差异：HTTP错误的处理逻辑 #

• fetch默认逻辑：只有当请求遇到网络故障（比如断网、浏览器阻止请求）时，Promise才会reject；只要服务器返回了响应（哪怕是404、500），Promise都会resolve。所以你必须在then里手动检查status码。
• Axios默认逻辑：只要HTTP状态码不在2xx范围内，Promise就会reject。这是Axios团队的设计选择——他们认为4xx/5xx属于业务错误，应该和网络错误一样被统一捕获，这样更符合大部分开发者的业务需求。

这就是为什么你看到的Axios示例几乎都是链式then/catch：因为HTTP错误直接进catch，不需要额外判断，代码更简洁。

2. Promise两种写法的差异（链式 vs 分开挂载） #

你说的两种fetch写法的差异，本质是Promise的then/catch挂载方式问题：

链式写法：fetch().then(fn1).catch(fn2)

这里的.catch()是挂载在.then()返回的新Promise上的，所以fn2会捕获两种错误：

• fetch本身的reject（网络错误）
• fn1内部抛出的任何异常（比如代码错误）

分开挂载写法：

const p = fetch();
p.then(fn1);
p.catch(fn2);

这里的.then()和.catch()都是直接挂载在原始Promisep上的，所以：

• fn2只会捕获p本身的reject（网络错误）
• fn1内部抛出的异常会变成未捕获的Promise rejection，因为p.then(fn1)返回的新Promise没有被处理（没挂catch）

Axios也是一样的规则，只是因为Axios默认把4xx当成reject，所以链式写法可以一次性捕获所有错误，这也是示例都用链式的原因——更实用。

总结一下：

• Axios默认把4xx/5xx当成reject，catch里可以通过error.response区分HTTP错误和代码错误；
• fetch默认把4xx/5xx当成resolve，需要在then里手动判断；
• 两种库的Promise链式/分开挂载行为完全一致，都是Promise的通用规则；
• 链式写法更适合统一捕获所有错误，所以Axios示例大多用这种方式。

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