VueJS+Axios项目API请求错误信息展示问题求助

先排查核心问题点 #

你能在Network面板看到401的错误数据，但前端拿不到，大概率是这两个原因：

• Swagger生成的API代码里，validateStatus配置把401判定成了"成功响应"，没进入catch块
• 错误捕获时没正确读取Axios错误对象里的响应数据

步骤1：检查Swagger生成的API配置 #

找到项目里Swagger生成的API初始化文件（一般叫api.js或authApi.js），查看Axios实例的validateStatus配置：

// 示例Swagger生成的Axios实例配置
const axiosInstance = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL,
  validateStatus: function (status) {
    // 默认逻辑：只有2xx状态码才视为成功
    return status >= 200 && status < 300;
  }
});

如果这个配置被改成了return status >= 200，那401会被当成成功响应进入then而不是catch，改回默认逻辑即可。

步骤2：正确捕获并处理登录错误 #

在你的登录组件里，调用Swagger生成的login方法时，按以下方式处理错误：

<template>
  <div class="login-wrap">
    <input v-model="form.username" placeholder="用户名">
    <input v-model="form.password" type="password" placeholder="密码">
    <button @click="submitLogin">登录</button>
    <!-- 错误信息展示 -->
    <div class="error-tip" v-if="errorMsg">{{ errorMsg }}</div>
  </div>
</template>

<script>
import { AuthApi } from '@/generated-api'; // 导入Swagger生成的AuthApi

export default {
  data() {
    return {
      form: { username: '', password: '' },
      errorMsg: ''
    };
  },
  methods: {
    async submitLogin() {
      this.errorMsg = '';
      try {
        const res = await AuthApi.login(this.form);
        // 登录成功逻辑：存token、跳转页面等
        localStorage.setItem('token', res.data.token);
        this.$router.push('/dashboard');
      } catch (err) {
        // 重点：Axios错误对象里，response.data才是后端返回的错误数据
        if (err.response?.data?.errorMessage) {
          this.errorMsg = err.response.data.errorMessage;
        } else {
          this.errorMsg = '登录失败，请检查账号密码或稍后重试';
        }
        // 控制台打印错误详情，方便调试
        console.log('登录错误详情:', err.response?.data);
      }
    }
  }
};
</script>

<style scoped>
.error-tip {
  color: #f5222d;
  margin-top: 12px;
  font-size: 14px;
}
</style>

步骤3：全局统一处理API错误（可选） #

如果项目里有很多API需要处理错误，可以在main.js里配置Axios响应拦截器，统一捕获错误：

import axios from 'axios';

// 全局响应拦截器
axios.interceptors.response.use(
  res => res,
  err => {
    // 处理所有非2xx的响应错误
    if (err.response) {
      const errData = err.response.data;
      console.error('API错误:', errData);
      // 这里可以用UI组件库的全局提示（比如Element UI的Message）
      // this.$message.error(errData.errorMessage || '请求失败');
    } else if (err.request) {
      console.error('请求无响应，请检查网络');
    }
    // 把错误抛出去，让调用方仍能自定义处理
    return Promise.reject(err);
  }
);

关键注意点 #

• 确认Swagger生成的API方法返回的是标准Axios Promise，没有额外封装吞掉错误
• 如果后端返回的错误结构不是{ errorCode, errorMessage }，要对应调整读取字段
• 测试时可以在catch块里打印console.dir(err)，查看完整的错误对象结构

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