Vue+Axios如何将无效数据请求转为catch捕获的错误？

没问题！Axios绝对支持这种自定义错误判定的需求——它默认确实是依据HTTP状态码（2xx范围进入then，非2xx进入catch）来区分响应，但我们完全可以扩展逻辑，把业务层面的异常也纳入catch的处理流程里。

下面分享两种常用的实现方式：

方式一：用Axios响应拦截器（推荐） #

这是最优雅的方案，能统一处理所有请求的业务错误，避免在每个请求里重复写判断逻辑。你可以在响应返回、进入then回调之前，手动检查业务数据，不符合预期就抛出错误，这样会自动跳转到catch块。

示例代码：

// 先创建独立的Axios实例（推荐这么做，避免修改全局Axios的行为）
const api = axios.create({
  baseURL: '/'
});

// 添加响应拦截器
api.interceptors.response.use(
  (response) => {
    // 先处理HTTP状态码2xx的正常响应
    // 针对GET /user的场景，检查返回数据是否包含有效用户信息
    if (response.config.url.includes('/user') && (!response.data || Object.keys(response.data).length === 0)) {
      // 抛出自定义错误，触发catch逻辑
      throw new Error('未查询到用户信息');
    }
    // 数据正常则返回响应，进入then回调
    return response;
  },
  (error) => {
    // 这里处理HTTP状态码非2xx的原生错误（比如404、500）
    return Promise.reject(error);
  }
);

// 使用这个实例发起请求
api.get('/user')
  .then((response) => {
    // 只有HTTP状态正常且业务数据合法时才会进入这里
    console.log('获取用户成功', response.data);
  })
  .catch((error) => {
    // 这里会捕获两种错误：HTTP原生错误，以及我们自定义的业务错误
    console.error('请求失败：', error.message);
  });

方式二：在then回调中手动判断并抛错 #

如果只是个别请求需要这种处理，不想配置全局拦截器，也可以直接在then里检查数据，不符合预期就主动抛出错误，后续的catch同样能捕获到：

axios.get('/user')
  .then((response) => {
    // 手动检查业务数据
    if (!response.data || Object.keys(response.data).length === 0) {
      throw new Error('未查询到用户信息');
    }
    // 数据正常则继续处理
    console.log('用户信息：', response.data);
  })
  .catch((error) => {
    // 同时捕获HTTP错误和自定义业务错误
    console.error('出错了：', error.message);
  });

补充：Axios默认的错误判定逻辑 #

默认情况下，Axios确实只根据HTTP状态码区分：状态码在200-299之间的响应会进入then，其他状态码（比如404、500）会进入catch。但通过上面的两种方法，我们可以轻松扩展这个逻辑，让业务层面的“异常”也能统一用catch处理，让代码的错误流程更清晰。

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